From 167126cfd1c2a46a9768107f0420949f55f8af83 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Tue, 13 Feb 2018 12:06:23 +0800 Subject: [PATCH] Doc: fix titles --- 2.2/en-US.2bbd7ad.js | 1 + 2.2/es.072de00.js | 1 + 2.2/index.html | 2 +- 2.2/manifest.30bd856.js | 1 + en-US.2bbd7ad.js | 1 + es.072de00.js | 1 + index.html | 2 +- manifest.30bd856.js | 1 + 8 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 2.2/en-US.2bbd7ad.js create mode 100644 2.2/es.072de00.js create mode 100644 2.2/manifest.30bd856.js create mode 100644 en-US.2bbd7ad.js create mode 100644 es.072de00.js create mode 100644 manifest.30bd856.js diff --git a/2.2/en-US.2bbd7ad.js b/2.2/en-US.2bbd7ad.js new file mode 100644 index 000000000..1e8af4510 --- /dev/null +++ b/2.2/en-US.2bbd7ad.js @@ -0,0 +1 @@ +webpackJsonp([2],Array(600).concat([function(s,t,a){function l(s){return a(e(s))}function e(s){var t=n[s];if(!(t+1))throw new Error("Cannot find module '"+s+"'.");return t}var n={"./changelog.vue":666,"./component.vue":674,"./design.vue":679,"./guide.vue":683,"./index.vue":688,"./nav.vue":693,"./resource.vue":698};l.keys=function(){return Object.keys(n)},l.resolve=e,s.exports=l,l.id=600},,,function(s,t,a){function l(s){return a(e(s))}function e(s){var t=n[s];if(!(t+1))throw new Error("Cannot find module '"+s+"'.");return t}var n={"./en-US/alert.md":1005,"./en-US/badge.md":1011,"./en-US/breadcrumb.md":1016,"./en-US/button.md":1019,"./en-US/card.md":1024,"./en-US/carousel.md":1030,"./en-US/cascader.md":1036,"./en-US/checkbox.md":1042,"./en-US/collapse.md":1046,"./en-US/color-picker.md":1052,"./en-US/color.md":1058,"./en-US/container.md":1063,"./en-US/custom-theme.md":1069,"./en-US/date-picker.md":1072,"./en-US/datetime-picker.md":1078,"./en-US/dialog.md":1084,"./en-US/dropdown.md":1090,"./en-US/form.md":1096,"./en-US/i18n.md":1102,"./en-US/icon.md":1105,"./en-US/input-number.md":1111,"./en-US/input.md":1117,"./en-US/installation.md":1123,"./en-US/layout.md":1126,"./en-US/loading.md":1131,"./en-US/menu.md":1137,"./en-US/message-box.md":1143,"./en-US/message.md":1147,"./en-US/notification.md":1151,"./en-US/pagination.md":1155,"./en-US/popover.md":1161,"./en-US/progress.md":1167,"./en-US/quickstart.md":1172,"./en-US/radio.md":1175,"./en-US/rate.md":1179,"./en-US/select.md":1185,"./en-US/slider.md":1191,"./en-US/steps.md":1197,"./en-US/switch.md":1201,"./en-US/table.md":1207,"./en-US/tabs.md":1213,"./en-US/tag.md":1217,"./en-US/time-picker.md":1223,"./en-US/tooltip.md":1229,"./en-US/transfer.md":1235,"./en-US/transition.md":1241,"./en-US/tree.md":1247,"./en-US/typography.md":1253,"./en-US/upload.md":1258};l.keys=function(){return Object.keys(n)},l.resolve=e,s.exports=l,l.id=603},,function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAESRJREFUeAHtnW2IHdUZx88zu+vuvZtk12gikYoIyoJFEPvBqEVCrLTWqKWIUomCGPxoIa1WpSBS32ratM3HNlKIYjHkQ9VYC9YgoWryoSJtFZYIQQSDiYm72d177ya78/T/zL1ze/fufZm5d2bumZln4DJv5+U5/+d3z5kzc2YOGV1WKHCW+WJTNlPLZKaI3SnDZoMhWov1Wibjram2NrKWhc0ctue4tqba2jDL8VNMzvQQm2lTMNPriL5ekWHOdyiv5Wfm8dlFcxPguY5cd4qJBLYpNrw+Tk3I0BlAOU3M0+w409j+aGLUvE9EC3Hma2vauQEQwI3OV8zmJdfdihptKwp+PY6N2OAYwHeejTmKGvPQsOMcWjNmjuDYog22xW1DpgGcrfBVaBbvhmNvgYNvxLoQt6CRpE9UhmM+wB/lXTT3BybG6Fgk6VqYSOYAnGVezyVzryG+HzXcDRZqHtok1IYfGqaXqWhemyA04RlaMgGgNKUzJXM7ATr4Zhv2L8iQj+pFAYjnsHOQAeNk0bwlTXf9ZEo3Ug3gPPMlS2V3J2qHh9B5uCilPujJbHRmTqOWf2m44OxeQ/RVT4lYECmVAJZKfNmicR+DE3agthuzQMeBmYBasII/395R47xYLNIXAzOkx4xTBSA6FVfysvs4Ls4fkGa3xzJnMprXHDPvoyHnBXRaPktLIVMBoNebdd2njaF7AN5QWsQdhJ0AcRl3xveT4zyVht6z1QACtsJMyX0Soj6K7dFBODSteUKzRWi2a7LoPIftsq3lsBbAsxXe5rq8ByJeYat4abAL8B13HHpk3RgdtNFe6wAsl/nyCvMfcNP4LhsFS61NRK+PEf20UKDPbSqDY4sxqOmGZsr8OOD7VOGLwSv4Q4u2orFoHUMOPSVpRQ24wLzpfJlfhTBbeiqFRgqlAJrl90YKdN840YlQEWMIPHAAZyp8q1nmV3Ava2MM5dMk2yiAe6gnzRBtnxyjd9oESeTwwJpgr8ldWH7GuPx3hS8RX6/IxNMc2s/AB4NskgdSAy4s8KXniP+Ca72bV6iiO4NRgOjwBUw/GR+nL5M2IHEAZ0ss4/DexD9wQ9KF1fzaK4Am+RSuDe+YKNLR9qGiP5NoE4wnGre5hg8pfNE7st8UxSfiG/FRv2mFiZ8YgLNl3s4uv4FmtxjGQA2boALwjfhIfJVUrokA+E2Jd6LZ3YffcFIF03x6U0B8JL4Sn/WWQrhYsV4DoiA0W3Z/jWHxj4YzS0PboABeB9g1UXB+gWtDvNEQzxIbgB58JfdPsPyheEzXVJNQAIDsnSg6D8cFYWxNsFfzKXxJMBJrHqhAdogv48oklhrQu35g97dxGa3pDkABcn52YZF2R51z5AB6vd1qhyPytKMuvKYXXAFpgvF7YKJArwSP1T1kpJDIPSTpxktPqnvWGiJtCgDAJXLoToy0fjsq2yMDUJ5wyI1Mvc8XlWssTYeo5BjaGtUTk0gAlGe75w1/rE84LIUmYrPksd2IoWujeHbcdy8Yze2QDCxQ+CL2ssXJia89n0cwsLVvAGdLeFtNR7VYjEtMpsHnnu/7TL6vJtgbTCrj+Zj7BrnPcmj0ASiATolrHPpBP4NaewbQG0Zf8q77dCTzAJxvS5YysnqkiOvBHof391RzyXWf9w6HDqO3hYOB2YHrwY2193l6etGpJwBnK0ZeFN8ysFJrxlYpICwIE70YFboJrr23K69O6ri+XhTPahzcH8R7x1eHfe84dA2Id0v3KHxZpaiPcqFC8tgImUQoAOVzGYDvzpB5aPC8KAA2PEZClDdwE4x2voCBBp9gfUWI9DVozhTArZnjGLDwbawDfRApcA0oX6lS+HJGUw/FFUaElaBRA9WA1e/z8X+ReCa/vRxULA0XTAHUfosYNXNNkO8TBqoBGR+HVPiCiR91qMMffh51krGnB1ZGhZkgGXUFELXflfJl0iCJaZjoFRAA0wihMFNlp7MmXQGUbzKD6J7ucnfOWs8GVSCNEAoz3ve8uxSyI4DyNXr5IHiXNPR0AgqkEUJhx2Oogz4dAZSpEECyfo2+g4BJnkobhMKOMNRJo7YAyiQwGOmwo1NkPZe8AmmDUBgSltop1RZAmYEIBOd6Eph2og36eJogFIa82azaiNYSQK/ZxfRXbeLoYQsUSBOE3lRqbS7lWgIoE/9hnFeu5l6zgKnQJqQFQmFJmGpVwJYA1madbBVej1mmQFogbMfUqkdx3ny7ZT6BZtjKx26fHT9j/vbOMXN2PhcTigfG/eYbLjfys3XB47lzVKBNzfMdr6oBZbJnW+ETcRW+1ojZXhMKU95E4k3mrwIQc9DqjecmkXQ3IgWqE4qvSGwFgN6oF+bNK0JYtvPDW68y69bovIXNbrG9CRZ7UQveIIw12r7iGhDTOD2BUQzPNQbQ7cEq8Mzuw10NSAN8fiEwjeyTkwV63t9fUQMC0Vv8E7pOhwJpgs9TtImxOoCoHkfxNcwb0yG7WikKpA4+2CyMCWu+B+sAzlfMZtSABf+Eru1WII3weYqCMY+1mrx1AJdcd6vdkqt1vgKpha9WgEbW6gBi7JYC6HvY4nXa4fOkbWDNAxBt8ji6w9dbrLuaBgUyAR/KIawJc+JUD8DZRXMTDujAU1HE0iUr8Im8wpowJ9vVJpjNdbKji50KZAm+usI15jwAyXWn6id0wyoFMgkfFPaZq14DEimAVmH3f2MEwCwumHTEY85vghXALHrZ5jKx8Zijs8wXL5fcUzbbqrZlU4GhorPBMeUqidksopbKagXAnrNMCqDVTsqwccKeQ6w94Az72OqiCXsA0Og0C1a7KbvGCXsOusNrs1tELZnNCgh7DgZoKYA2eynLtoE9zLypAGbZx1aXDew5zGaN1UaqcZlVQNhzSGvAzDrY9oIJe3oNaLuXsmyfXgNm2bspKJtXA6bATjUxuwpIEzyX3eJpyaxWAOwN4zbMHCBMzbcA/3nCmGf+Rear8oqPOtR1vqTA5pffYfPdTfVDHTfyll5HMZI+CfbomwX33xilf03Sefea3/cPkjnZBj4/TYHw79vwCnSAJW/pBZAkwSD0H7kRnaomuBt8ol672rGVsnlLr5UGAzsG9mQwQqoAHJhYmnHkCgh7qasBI1dBExycAtUakOcHZ4HmnGsFmOcwHMuczLUIWvjBKUDmFAB0pgdngeacZwWEPWeIjQKYZwoGWHZhzzEFBXCAPsh31mDPWUf0NSaUO5NvJbT0SSsgzAl71S8jkNaCSTsg9/nVmKt+nIhZrwNzT0SyAlCNuerHiRztCScrv+bGNeb8JvgjlUQVSFQBMh5zHoATo+Z9TCZ3PlEDNLPcKiCsCXMiQPUakGgBg5eO5lYRLXiiCghrgHBBMq02wbLFfEhWuqgCsSvQwFodwGHHUQBjV14zEAUaWasDuGbMHMFcIWWVSBWIVQEw5rFWy6QOINrkRbxl8UGsmWviuVdAGBPWfCHqAHoHiN71T+haFYhFgSbGVgCITyUciCVTTVQVqCnQzNgKACfG6Biqxw9VLVUgDgWELWGsMe0VAHonmF5uDKDbqkBkCrRgaxWAVDSvgdRzkWWqCakCUECYEraaxVgF4AR5YwMPNgfUfVWgTwUO1thakcwqAOUst6gqV8TSHVUgpALtmGoJ4GTRvIURq6dD5qHBVYGWCghLwlSrky0BRHt93hC/1CqCHlMFQisAljymWkRsCaCEGy44uxGp0iKOHlIFAisgDAlL7SK0BXAN0VdseG+7iHpcFQiigDAkLLUL2xZAiTBqnBfbVZ3tEtTjqoCvgLAjDPn7rdYdASwW6Qt0ife1iqjHVIGuCoAdj6EOATsCKPFoyHkBJC93SCPRU8tL3e+RBwnjGx0kbJAwaUnPtzPutTAj7HTLpyuAeHb3Ge4M7u+WUFLnT5/4wnQCQs5JmKBL3tILqkv/4Xh/lZ3OKQ13Pl09S47zlHH5x8w8GiR8nGFK82dN6dgnkWWRt/QiE65DQqj9FsmhpzoEqZ/qWgNKSBnBAPh21WPphirQQQFhpXnUS7vggQCUyJNF5zmQfbxdQkkdv3TtSNesNgUI4yeSt/T8cse1FkaElaDpBwYQCZcdhx4JmnBc4X637VumEzRy7vcIE3TJW3pBdek1nDAirASN33qyjQ6xvym5f8Wtmbs6BNFTeVWA6PULi86PwhQ/NIDlMl9eYf4UEBbDZKRhM64AUWmM6OpCgT4PU9LATbCfqGSAKvZX/r6uVQFRQJgIC58Xrxf50MsZmi3zP7De0kt8jZMtBQDfexMF+h7WoR9YhG6CfekWmDedL/HHeNi80T+m6/wpgLF+J0eKdO04EWbxC7+EboL9LLwMh2g7qHf9Y7rOlwKe78FAr/CJWj0DKJEnx+gddEael21dcqgAfO8x0EfRe26C/TzlenCmjC9rMd/sH9N1DhQgOjxZoK29XPc1qtM3gJLYwgJfet5414MbGhPX7WwqgOu+UyMG133j9GW/JeyrCfYzF0PwT7gDffGSf0zXGVUAPhZfRwGfKBQJgJLQRJGO4jHM3TBuSfZ1yZ4C4lvxsfg6qtJFBqAYhBEQb8PIB/HDV1h1yZIC4lPxrfg4ynJFCqAYhhuSr7Chn0dppKY1eAXEp+LbqC2JHEAx8MIi4ZVOo+MHo/bWgNITX4pP48g+kl5wK8Nwe4ZmS+4f0RbvaHVej6VDAQCyd6LoPBzXZVUsNaBIKwZXDdeaMB2orbZSar444fM4WZ1t9Ee+KfFOMvwbqRWjT11TjFoBqTzkmi+uZrfR3sSAwOiZ7QDwz/gFehGq0UjdTk4BwLeE34NxdDhalSIxACXz2Qrf5rp8QAeztnKFBcdwk9m7zxfxrZZOJUsUQDFktsTXoxZ8E8O49LFdJ88kfE4er6HmuyPKm8xBihBbJ6Rd5lJAeY6IXsrhdmH0eMIKwBfik6Thk1ImDqBkKs8RvZEUxjyLf52OJxRRBrCI9mgCnxVfRPVsN2wxEm+Cmw2cqfCtZpnx9ERHVjdrE+e+jGQ2GEza73i+fm0cOIBSAG94f5lfxbXhln4LpPG7K4Ca772RAt3Xz0jm7rkECzGQJrjZNBHCe6nFcZ7QIV3N6kS4L0OpoLFobQN8UjIrasBGiWvvHe/BrZo7G4/rdp8KEL2B93Yf6eXVyT5z7hjdOgB9a89WeBvuGe5Bs3yFf0zX4RVAc3tcPpexboysnPvFWgBFasBXmCm5T0LEx7B9QXj58xsDmi1Cs121j0oF/lZL0opZDaAvBp6gXMWu+zSuGO6BqEP+cV2vVgDg4eVw3i/fdAz6ibTVqSR3JBUA+nIAxCt52X0cHZUHAGL377T5EXOwBnh4L4z3yWdxAR6+apuOJVUA+pKWSnzZonEfw72sHQBxzD+exzXAq8hUCPI1+m4fBLdRn1QC6As5z3zJUtndaZgeghMu8o/nYY0/32mZzUomgek0D4ftWqQaQF9caY5nSuZ2DGO7H8e2YT+THRbUdjJFwEGZ+M+bz0+a3ZQvmQCw0QezzOu5ZO5F7SDXiZsbz6V1G+AdQS2/T+bbbTXlaVrLJXZnDsBGZ3i9ZzZ34+L8FrybciPWhcbz1m7jE7dwzAfobL2LYfEH0tCb7VXLTAPYKApqw9H5itm85Lpb4ditKLiMS7SiJy09WPxBjuIPcmjYcQ6tGTNHcGyx0f6sbucGwGYHAr7x2UVzk2FzHbnuFN66nsL2FDoz65vDRrmPzsMZtDvTeOtimh1nGtsfTYya9wHcQpT5pCWt3ALYzkFnmS82ZTO1TGaK2MXPbAScawHnWsCyFm/roNOJ7dq+lw6bOZybw7k5nJvHOW8fkM3hNayTTM70EJtpUzDT64i+bpd3Ho//Dw7/YlbG4ZiJAAAAAElFTkSuQmCC"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAE5hJREFUeAHtnXuMXFd9x3+/u7vendm113b8itsUTB5bldKmBCkmaYK7KREWdqpWAQQKQcgW/7RNWoPTJIVGiFeK20gE9Z9iVNVEVIT8g2OUFojrBiXYUklpBVVXQJ0ojeN4be+OvTsz6925p9/fnZ31zOw87ty5j3Nnflca3dd5/M73fOace+49DybdahS4ZMwmKtBEiWmCjTtBhjYT81rs1xomb8/Le5K9bIYu4/iyWd7z8p6MkevThp2pAUNTlKGpdcznayLs8xPu1/QbY0ZzC3Q74Hknu+6EYRbYJgyZjVFqwsQXAeUUGzNlHGcKxy+PD9OLzDwfZby2ht03AAK44bki7Vxy3UmUaJNI+K24NmRDxgC+RUN0CiXm8UHHOT42QidxbcEG26K2oacBzBXNjagW70XG3oUMvg37TNSChhI+cwEZ8xL+KM+jun9mfIR/Hkq4FgbScwDmjNlo8vQhYvNRlHDvtlDzjk1CafgjMvwNztK3xhlVeA9tPQGgVKWzeXo/AzrkzR6cr+mhPFpJCkC8gpNjBjCuz9J3pepeuZnSg1QDOGfM1qWCewClwz40Hq5JaR4EMhuNmQso5b8+mHGeGGN+M1AgFnhKJYD5vLlugdyHkAn7UdqNWKBjYiagFCziz3d4mJwvZ7P8WmKGBIw4VQCiUXGDKbkP4+H8fql2A6a5J7151bExR3jAeRyNll+kJZGpANBrzbruZ4n4gwBvIC3iJmEnQCzhzfjT7DiPpaH1bDWAgC0zm3cfhagHcTycRIamNU5otgDNDq3POl/EccHWdFgL4KWi2eO65kmIuMNW8dJgF+A77Tj8wLoRPmajvdYBWCiYtxSN+QpeGv+BjYKl1ibm74wwP5jJ8Ks2pcGxxRiUdAOzBfMw4PtvhS+CXMEfWrQVjUXrCGIIFKQVJeC8MdcuFsw3IcyuQKlQTx0pgGr5xFCGPzLK/EZHHiNwnDiAs0XzXiqZp/Aua0sE6dMgmyiAd6jnaIDvWz/C32/iJJbLiVXBXpU7X/o8ueafFb5Y8romEk9zaD+LPEiySk6kBJyfN9uvsPknPOvdWaOKniSjAPMLawx/eHSUz8RtQOwA5vJG+uE9i3/g5rgTq/E1VwBV8jSeDfeOZ/lUc1fh34m1CsYXjd0umeMKX/gZ2W2IkieSN5JH3YbVif/YAMwVzH3GNUdR7WY7MVDdxqgA8kbySPIqrlhjAXAmbw6g2j2C32BcCdN4gikgeSR5JXkWLITOfEX6DIiEcK7g/jW6xR/szCx1bYMCGA5waDzj/AWeDTGiIZotMgA9+PLu12D5vmhM11DjUACAHB7POp+ICsLIqmCv5FP44mAk0jhQgOyXvIwqkkhKQO/5wbh/G5XRGm4CCrDzyQ1ZfiLsmEMH0GvtlhscoYcdduI1PP8KSBWM3/3jGX7Kv6/2LkOFRN4hSTNeWlLto1YXaVMAAC6xw/egp/VzYdkeGoDyhUNeZOp7vrCyxtJwmPMO8WRYX0xCAVC+7S6S+Yl+4bAUmpDNks92Q8Q3h/HtuOtWMKrbAelYoPCFnMsWByd57eV5CB1buwYwl8doNe3VYjEuEZmGPPfyvsvgu6qCvc6k0p/PmK5B7jId6j0BBdAoccnh93XTqTUwgF43+rz33Kc9mRPIfFuilJ7VQ1k8Dwbs3h+o5JLnPm8Mh3ajt4WDxOzA8+CW5fE8gQY6BQIwVyQZKL4rsVRrxFYpICwIE0GM6rgKXh63K0MntV9fEMV71Q/eD2Lc8W90Ou644xIQY0ufVPh6laIu0oUCyWOjwyA6KgFluoxSyX22wzgic+6iq8bLmHP+xBmm/8J+GjOgnC8SLWE6+17cBtEtbxMmo9ucIfqtTUS7tmOGdewdi5I7MODs7WQaEN+mo57PoKPBz7DfYUPmfu81oq/+lOn/5nwnwQazQ7fhV8cM/elvGrr7utCDDhQgXs2cRoeFt2Pva0Ik37k3M1/6HCz6dCCrQvQ0i7njD55k+vdzvk0PMXZ7g3rXFkOHdhpab8ccYp/fMDrwGT9q+crF8vx85qco/RKde/mVy0R//EOmM/O+zPaT/p5ys33U0N/dYeit5eVzEksbSr8F9Jp5h5/5CX01Qgwmh0waPin5FL7WTMkfUzQSrZLcwMqwMOPHhrZFCUq/G9DH738QaKAXjX6M8ONm/wmmH0+3NddPUD3v5pbNhg7vimwckS/9UAqWUAr+ervpgtuWgDInc9Lw/QsaHAqfr3z3HIlWolmSmzDjzefdxoiWRYrMRn+FzC8RWGITgsurlnueY3pdn/vaZGXt7V/B8+DR3SbRVzQoBRfXEF/favb+liWgLIWQJHwi6X/g/Z7CVwuXnzPRTLRLchN2hKFWNjQFUBaBQU+H/a08x3HvX19vWUjHYUJq47BBO2FIWGomYlMAZQUiEJz4IjD/eaGZ6Xq9nQI2aCcMeatZNTG2IYBetYvlr5r4ifXyOV/v02M1KTWRWaOdLKXWpB3REEBZ+A/9vKxYe02+7eoWTAFbtBOWhKlGqWgI4PKqk43cx37N7dGOBXEIaZN2zZhaBaCstwtx9sQhkMbRVwrsWWarJtGrAJTFnlFfJ/rNt8ZCPekJBYQpbyHxutSsAhBr0N5f50ZPVYFwFCgvKF4TVg2AXq8XY3bWuNATVSAkBVAKvlsYqw6uBkDMZHpv9U09bqzANoyG+codRKc+UP7JsVzTrb0C9YzVAIixHne1D6K/XQhoz92D79NvI9qCY/nJsVxTCH2wUcfYCoAoHofx3f82H0H0tZNHbqGGvY6lJ7Lc0621AsKYsFZxtQLgXJF2ogTEcBfdWimwc1vzu63uNffVZ3fAmMfacrJXAFxy3ck+k0KTm5AC1aytAEjMCqCPDDl5trmjVvea++rDO1WseQCiTh5Fp6db+1CKjpP8pR9TwzEXMg5D7unWXgFhTZgTlx6AuQW6HRcS6/Xc3mR7XJzNE+0+SnT0f4nO4Vh+cizX5J5u7RUQ1oQ5cVmeTBwD7Nt7UxcVBQS0B39YOdN9IAXKzH3PKwHZdScCBaKeVIGAClSYKz8DMiuAAYVUb8EUwKIjHnMegGRIAQymo/oKqsAyc84lYzahx6r0AdRNFYhNAWFO2HOooKVfbKprRLUKgL3BEgPAZGdxqDXK8rPTH2tt4I5/bH1f715VQNhz2GgL+KokehSnAsIeAKQtcUaqcakCFQWEPQfN4YRnk6uYo/t+U0DYc/D8pwD2W87bkl6wh5U3FUBb8qPv7AB7Dvroj/VdwjXBVigg7DmsJaAVmdGPRgh7+gzYjzlvS5r1GdCWnOhTO7wSsE/Trsm2QwGpgrH6hm6qQAIKgD15DaMAJqC9RgkFwJ68hlEAlYZEFBD2tARMRHqN1FNASkB8ENYSUHlIRAFhT0vARKTXSD0FyiWgmVM5VIFEFDAGjRCmc4lErpGqAkzTANCZUiVUgSQUEPacAUMKYBLqa5wk7DmUUQCVhYQUAHuD65jPz867F3VssL9M0FFv/nRq5wqLGF4U9sozI7CWgu0E0/shK7DMXHlyImP0OTBkfTW41grwMnPlyYkcbQm3lkvvhq2AWWauUgW/HHYEGp4q0FIBJo85D8DxYXqRmRdbetCbqVPALS1ZabOwJsyJceVnQOZ5TA9zykpr1ajACpSW7CxThDVAOC8JK1fBcmTMcdnp1jsKLF7BzOk2blWsrQA46DgKoI2Z1YVNhblcF76j81rN2gqAYyN0EmuFFKKLVkOOVQHj0uCihR2dwJjH2rIYKwCiTl7A+g0vxSqSRhaZApdmztO20ZXsjSyeTgMWxoS1ir9aC5mfr9zQfXoVkNZv7vxZun7jsH2JqGOsBkBMlfCMfRarRR0pgJE+58+8SqVSiXbftK4jr3E4rmesBsDxEf45iscfxWGIxhGNAjPnXqf83CUaGmB6303j0UQSMFRhSxir9l4DoHfD8DeqHehxOhQwrouS7xXKXZz2DN73rk20MTtgl/EN2FoFIGfpWyD1il2WqzWtFCjOX6Y3XpmiudyM52zdyAAdvGNrKy+x3xOmhK36iMtrxVVdHWe+OJt3j+HSH1Vd1kPLFJCGRmH+Es3NXsT+6shaPGPR1/7w1+wr/YiOCVv1Mq4CUBwYr6g0qQRwDq8fFoo9umwlGhilpSVaWrpCi1eKyKf67CT6wt3b6e4b7Wt8lJlabW9DANdn6bu5PF9AL+lrVnux90ruwlmaOfeGvQZGaNnwINNX915HH3jHhghjCRY0ej9fGAdTjXyvegYUR6ivF4nN1xt5sPVaP8N3x44x+sG+m6yEz+MFLHlMNYAHTwyNtzljti4VzCtYXHiksYt4rv7Otxv+R2oi70f4pKFx9w3r6MO/vYEmr7d3oQOAVxzM8FvHmN+sybTlk4ZVsNwTDzP50mEc/smyWyt38sZ/ZvpqtfuxW66hm6/NWGlrt0YNOUxbxgbp2rVraGLzCA21/292G2XX/vEYd3iMnYbwSeBNS0C5mc+b666Q+aUssS7nSWytSsB6+P7s9q302F3bkjBT42yggFS7a4ivz2b5tQa3vUst/0OeR2OONPOc5PV6+P78dxW+JPOjYdxgpxV84qclgOKAB5zHQXJJjm3ZGsH3V5Na8tmSP2KHMCPstLOpLYD4dvcLvBl8ul1Acd3PnX+j5pnvAN74K3xxqd9JPObpMjut/bQFULyz4zwGolf6cLUOMrq7ZfjOrkTwScD3md/Tkm9FEEsOhBVhxo85vgCUHgxoiBzyE2BUbnJo6c5M18L3aYUvKrm7CldYqe/10izAlq3gak8INJMrmJ9hv6P6etTH0gquL/k+dedW+stdWvJFrX2Q8FH6nR7P8Nux9zW8w1cJKIZIgI7DDwQxqhs/Cl836sXvVxjxC59Y5xtAcbxuhI+BxO/IcVxbdbV78M5tWvLFJXyQeMCGx0gHfjsCUMIdYX4QEMbe3eSh92yjR3fZ1cetA5173ymY8NjoMKUdA5jJ8KsoYj/XYTxdORf4HnmPwteViBF7FiaEjU6j8d0IqQ4YDZEBNEh+gP2u6utRHD/+b2/SwwpfFNKGFibgO4GGx+9j3/EHi0AAiuXzxly7mDc/wcfmLaGlRANKnQLo63duKMs3jzJf7RHSQSo6roIrYXsRDvB9oN6tXNN9fyng5T0YCAqfqBUYQPG8foS/j37hX5Jj3fpQAeS9x0AXSQ9cBVfilOfB2QJm1jLmzso13feBAswvrM/wZJDnvmp1ugZQApufN9sXyXse3FwduB73pgJ47pseIjz3jfKZblPYVRVciVwMwT9hbxLvBys26D4mBfC+T/I6DPjE4lAAlIDGs3wKn2HuhXF2zgsrRurWlQKSt5LHktddBVTlOTQAJUz0gHgORn4cvwYjVqti1cPUKSB5KnkreRym8aECKIbhheRThvhTYRqpYSWvgOSp5G3YloQOoBi4IctPYIqIRPsPhi1UP4cneSl5GoUGobSCGxmG1zOcy7t/j7p4f6P7ei0dCgCQw+NZ5xNRPVZFUgKKtGJw2XAtCdOB2morpeSLEj6Pk9XRhn9lJm8OMJm/kVIx/NA1xLAVkMJDnvmiqnar7Y0NCPSeuQ8A/gN+TWdjqDZMj5NRAPAt4ffxKBocjVIUG4ASea5odruueQaf7bKNjNFrCSuAl8zee76QX7W0SlWsAIohuby5FaXgs+jGpZ/tWuVMzPfk8xpKvr1hvmT2k4TIGiHNIpcEyndEtFJeaOZGr8esAPJC8iRu+CSVsQMokcp3RK8nBSb0xL9O+xOKKAlsoj2qwC9IXoT1bbfTZMReBdcbOFs076WSwdcT7Vldr02U59KTmdCZtNv+fN3amDiAkgCve3/BfBPPhru6TZD6b68ASr4TQxn+SDc9mdvH4s9FIlVwvWkihDeoxXEe0S5d9eqEeC5dqaCxaG0DfJIyK0rAaokLBfOWojFP4lXNPdXX9bhLBZiPYtzuA0GGTnYZc0vv1gFYsfZS0ezBO8MnUS3vqFzTfecKoLo9LdNldDpjQecxBfNhLYCSHMCXwaI5j0LEh3C8JlgS+9MXNFuAZofWZ50v4tjXREFJKGU1gBVB8AXlRqyF9lk8MXwQolq2AFrFSjv2gA2Dw83TMj+f3ynSkrQ8FQBWBAKIN5iS+zAaKvcDxMQmTq/YY9Me4GFcmDki0+ICPMxqm44tVQBWJJXZ+xfIfQjvsvYDxETXManYlNQe4BVlKYRhcr7cbkLwpGxsFW8qAawkqLyYjnuADO9DJqRqWbFKGoLu8ee7IKtZDWacJ5otAhM07Dj9pRrAilBSHc/m6f3oxvZRXNuD855ssKC0k2V0j8nCf7Ken1ftVkRI6b4nAKzWPmfMRpOnD6F0kOfEndX30noM0E6ilD8i6+02WvI0rekSu3sOwOrM8FrPhu7Fw/ldGJtyG/bpWMMLr02QMS+hsfU8usU/k4bWbLXunRz3NIDVQqA0HJ4r0s4l151Exk4i4dIv0YqWtFSl+IOcwh/k+KDjHB8boZO4lviyGNX6RXXcNwDWCwj4RnMLdDsZeie77gRGXU/geAKNmY31bsM8R+PhIuqdKYy6mDKOM4Xjl8eH6UUANx9mPGkJq28BbJZBl4zZRAWaKDFNsHHxoy2Acy3gXAtY1mK0DhqdOF4+98IxdBn3LuPeZdybwz3vHJBdxjCsc4adqQFDU5ShqXXM55vF3Y/X/x+UKbnM5rRzPQAAAABJRU5ErkJggg=="},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAHapJREFUeAHtXWuMZMV1rrrdM9Pd857Zx8yyT/Yx2IBjIwdjLEVobUuxjMlDyAiEkSwQfxJhidjYcSIhKwnYJkEKfyIlWFGwZcsWedjGsiXEClmyASdCCbDALCy7yy47uzszO+/unkffyvfdmTvb09Pdc191X9s1Gt3b91adOufUd0+9TlVJ0QobNDCr1DZREiMVKUakMkeEEtuFlN24disprKtcuwpeGZSYw/2cWrvKtatQis/HlTRGM0qMirwY7ZFyYkOGV/kPebXKr5TqnFkUnwJ4bpKmOaKkJNhGlFADOnUihbwMUI5KpUaVYYzi/tXeDvEbKeWCznzjSvuqASAA1zFfFresmOZRWLSjEPwTeNYWh4IB+JaVEK/AYh7LGsaxrpx4Gc8W48Cbbh5SDcCZsjqMavFOFOynUcC34prXrdBA6EtZQsH8Fh/KC6jun+3NyXcCoRtDIqkD4IxSA6oo7hJSfQkW7pMx1LlrlmANXxJKfl8WxI97JarwFIVUAJBV6XRRfF4CdCib2/G7PUVltC4KgLiEH88pgLGvIH7Bqnv9ZUJvEg3AeaV2rpTMh2Ed7kfnYTChZeCJbXRmJmHlv5fNG092SXnRE5EYJEokAItFtWdRmI+gEB6AtcvFQI+RsQArWMbH93SHML5bKMizkTHiMeNEARCdikOqYn4DjfP7WO16lDmVyazqWKlnZMb4Njot7yZFyEQA0OrNmua3hJBfBPAySVFuFHwCiBWMjP9EGsajSeg9xxqAAFt+umh+E0r9Gu47oijQpOYJnS1CZ0/0FYzHcF+KqxyxBeBsWd1umuopKPFAXJWXBL4AvlOGIR/qycnn4shv7ABYKql9ZaX+EYPGfxRHhSWWJyl/mpPyK/m8PBMnGYy4MANLl5kuqW8AfG+2wKehVPBBU7fUMXWtIQdPJGNhAReUGl4uqR9CMbd5kqKVyJUGUC2/2JaX93RKOeYqoYbIkQNwuqw+KyrqBxjL2qFBvhbJBhrAGOolkZH39uXk8w2ihPI4sirYqnIXKn8rTPWrFvhCKesNmVg6h+6nUQZRVsmRWMCFBbVrSaofoa33Bxu00voRjQak/HW7knd3dsrzYTMQOgBniop+eD/HF7g9bGFb+TXWAKrkcbQNv9BbkK80jhX8m1CrYMxofM4U6lgLfMEXpF+KLBOWDcvILy036UMD4ExJ3atM9TNUuwU3DLbihqgBlA3LiGUVVq6hAHCqqB5GtfsM/rNhCdbKx5sGWEYsK5aZNwruUmltA0IQOVMyvwO3+K+5Y6sVOw4awHKAJ3rzxtfRNsSKBj1BGwAt8BXNfwHn9+thvUU1DA0AIE/3FowHdYFQWxVsWb4W+MLAiNY8YEAeYFnqykSLBbTaD8r8B11Mt+hGoAFp/EV/QT4ZdM6BA9Dq7a52OAKnHbTwLXrONcAqGP/39eblD5yn2jpmoCDhGBK78exJbZ11K0bSNAAArkhD3gFP618GxXtgAOQMBwcyW+N8QRVNTOlIWTSEPBrUjEkgAOTc7rJQ/9ua4YgpaAJmi9N2bUJ+NIi5Y9+9YFS3GToWtMAXcCnHmBzL2irzABxbfQNwpojVai2vlhjDRRNrKHOr7H2S91UFW86k9OdTyjeQfcqhJblSplhZLgvTRAMD0zluAhrswjDaRLYth2XMqVQP5JKmMOQf+nFq9QxAy42+aLX7UunJbFZWxNLSvBvMNYzb3t4ljEw6BwboWd1WQHvQo3u/p0+T7T5rDUda3ehh7ZaXg9sv0qLl0oI2RHPMXqA9uGNtPY+nhU6eADhTFlwoflvMdBEYOyuVJddVbrPMWX2TZloDsUBMeJHPdRW8tm6XSydT69e3tLhgtfu8KLRRGiPTJtrbOxu9Tv5zjA9i3fGH3a47dm0Bsbb0qTSDj0hQCturBByUGTzNgFn0Rw4GycKGSyquAMjtMlA6d7jMI3HR2fsNOuigGTSPvukBGxZGXBByDEDU83nu1eKCdiKjmhotlU7acVH22n4+eaf8OAYgd6kCCA84JZzUeDqqX1sXOmnbeUR9JUaIFad8OOqErO7Pp94A8VTuvVytrJWVsjX4XP0sqHsOSmez6d/QFQPUi/CaudHJ/oSOLKDC5pBXA/jQvhUVDEDrChbtlI4HVusMWOkgZqqfNbrf0gLC+h2Cj9/bIOppoLFRxnF6XsEYnbmyLCqYcgsjZDBFZ2TbRCaT3goFVrACK3jdVtsFb2kBuSdzGsEHmVDVlsRiaVosLxVDAx8BTqAzT+ZNHtLYQyZmrP28t/iim1pA7kaPOYGTIJaaDcEtB4OVRVHBf5xCJtuB9mFHqhwXYAWX24U82Gz3/qYWkEchpAV8bHqtLMHilWdjBz5+CPwgyBt5TEszkdghhpp96A0t4OohMOo0iCS+28YqbwVVHmRppovYvIPlENn2gmBbMekBspSzebm/0WE6DS0gTyCKG/gIIFftJcRfWloQy5jbTQr4CDjySp7JO344xiB1Ezc5wU/OOs2qgRR1LSAStWGR0RiKOxbHX7F6WsG/DT4ybWTbrV6kYdT3s+PcKwvQTtNA/tg/pjMrnRikUX8QwjRXMHTEXjxa62vSMA3HGzPQURwCfAYnsYhpmG3CWn7qAnBqQf2xEOZ/1kaO4vcyeonNOgxUNhXNIQ3b85gFwl5mmkIbq+S1YRt+VJSxQtA1mbdmx6atzfGsmGZ1GX/S3yn/qzaTuuaDp066sPy1NAP7vark5r1VFgDd5vlvwErQUrBg0hb4QZnZFUHL7nROmR8udWIDN0qdrJ1kugmAmyygdd5uCdVvxNNurE6WyjOxaNNkDEO0ZbMoSFRtmQwK1cBSCFQs+Gdgu8vkv4mPoVKBdTLF8gqqRvyOOpDH9lyv2FTQITMGPpZkXg7Xnne8yQLysGe0/SJvPFRg0ViwUYX2tqzItbeL9jYsLALovASCcWl5WZSXlnDVN8XXjDfqkLrkPHSUwTJoRXkXePinaj42fRjwZHgJkW+pjhT2PatVjomFHWjVCrmcyOc6MATScIDAE1u0hqXyoiiWscougg+rI9ez3kb2JEAAiWAFX8LZdbdWk9oAQHq9mBXzRHWEKO65Go2r0sIKBF5nPg/wcSZig0oCZ4EWqQggLpRKoQKRq/K4Oi/qYGSMI9VeMhs+c+jmzqgZNCvLoYKPoNvW1wsAcv2uXvBRt8yDeTFP5h1W4AdN3UYdajG2AYBodH06SgbZ4uOwSxiBVm+gp1v0dHZanYow8qzOgx0Z5k0eyEsYgbqNrlW9JmENxtYlR9XQgYPspgDCyAaOdDqDVhcwOxX93V3o1XrrXFTTCuK+gs7K1Ny81YMOgl4zGpE7xeLs4r687EdNYI2vrVvA+bK4JUrw2eN5zZQXxDv2bAd7e2IDPsrED4E8kTfdgeOlzQavdedPjFlYW8toHYArpnlUe+ZNMgij6mXbq7cL01ohVXlNxN30ijyRN/KoO4Sh62YyVGNtHYAolcgAyJF93Q1kNvi7C4VYgs8uLIKQPOrunFgdPY2r/2x5Gl6rsGYBEO2/TjQGP9EwgeYX3H1KZ+CgMgs2yPDLE7Niz+PHxd5vHxe/OjEXJGmLV/KsM+jWeTPeiTVijnEsAM4sik/hQXTOZxq7ZhxQ7uvqCtzyPfjvZ8W5mSVxdnpJPPgf7zfTt+t3tITkOejB8A2MaNT5hnzq/CDWiDm+sgCIvvlNdeKF9khq6o2yIPs5zBHwrAYVQ/DZgSAMOpBn8k4ZdARdOnfM6xrmLABK0xxxnFBDxHJpSSwuBl+IPZ0Fz/O4GsR0TZLDRZQh6EBdU+dRBhtzFgBxAESkAJycnBCjJ07C6TS4DXzovZLvCG+mQVdhUgbKElSgjqlr6jzKYGPOroIjBSDHpYqYG339+FtioRjMTIgOyxFVgQUlC3VLHVPXkY4FUpFKWJgzZpXaBvergaiUy3w7u7qt7Fk1HH9zVIxPTvpihwO6QVoNX8wEkJiy+B2kpk6pW7upY+s8APY8kSDmiD1DlFaR6IlKQIkGBwZFDm5QDHTqPHnyjDh95iy+Um9dtTAGcwMS3TEZrzJRh9QldUrdMlDX1HnkAdgzKjJ6ALKnd+MNvwenySttnQsXx8Xxt07AkdNdY7kd1iJN1s8GCWWibG4CdUcdUpd2oI6pa129azsfJ1diz5Aq2h6wzWgnPEM+ftPNogvjX3aYn18QH3xwwf7p6JpLQcejkaBuZaPuqEM7ULfUMXUdh0DsAYAiNscssGq46WMfF0M7h9f1k3c5N5rr0D+hv85cyDduZavWHXVK3dpNnZBZr5sdsWegO7zaA6gbJfyHHIC97roPicOHj1jVRAGeyk4Dp6/C8q1zylOQ8Sibmyk66o5VLXVJneoYkPcjH7GXRXc4VgC0Bbpm127Rjd6xYTh3zecCorQHyuh0gVMBg9gf++hNoqenN55qAfZw8mY8AUiNdXf3uJrJaMeee2kPbmTkTAp1GNsA7BnopV9p9ceNU5fDMNlsPDycdarRtYwudaiT91raxB6bFbGsgskslnrX8tzwt2HgcEAIk/ZAGSmr0+BGh05pBhWP2DPi2ga0hHTx9WYbbN4TlLLiRMeVrC50GLqMcW8DLmPfZqcB+xE7jZr4eG5kdaPD0BVjWcDQc3WeIfdYcRqwU4vTqImP50ZWNzqMQjGsgoP1Jw9QCje7I8RhailA0ZuSciOrGx02zVTHS2AvC8MxBxDGYGZ6s4Tc3Mdprw/eFZsJaHxSwBjl4PDe9U0gD/ybt8yGMSv22CeFuO0a5+ndyEodxjYAexyGia0FrKw4r4K9es54LZzBoSvg80qD6cYwVfvNl9xRcCOrGx2648J/bGKPA9GxBSB2PHYsJQ7TcRw3iIiZADs9bluvbmR1o8Mg9OKKBi0gJoRjC8AMhlacuuljsbMr2f1G/rMb0EMPYLMfVsGP3+qOG6eyrmCTTOowroHYs9uAseQxC/+3YnEWc5lbj5XT2ZJVk5sGuh+hv3pzQXz1Zj8UvKWljLZj6VYUinDBz+VjPRVHC6jmtxIkqvdZzO1y/YLTEOsGt1MhtojnRkbqjjqMbVAKnRApLsWVQVrAUqnsmD2nXiKOCcYwohsZqTvqMLZBinEA0BiNK4PZrCGuueaKc+pWfHI/5rQHNzJSd9RhXAOxZ2SUiCUAK5VFsbQ4b20S7lSBLBw3QxRO6cYlHmVzA0DLdxA6pC7jGIg9Q+TjB8Dl5SIOmnHe9rOVy4EY7kif1kDZvAw2UZfUaewCsGf0SDmBucXLcWCOi6UXF+d8HTRT0rDFRxx0Qx78yMbDe6jbyBekrymTmCP2VhsIMnoriCPeVxXkc986VlFueopxAddWfFAmN9VvPXo8ZckCYchjpvV4wQSI1fSzAIihmMjbgTyaAZ9nXV7dPuQRCGkLgcnEdiR1HXGwMWcBUBnR9oR5nm+QVQOrqjRZQcrip/qtxRp1TZ1HGWzM2VXwq5Eyo8FjY24hho1uj0rWIYvSoHNX4klhYc4CYG+H+A2msKL7JNzOxjuQdHHtjDYHUWMdhT1fyhJ40KBzpzwSa8Qc46+2AaVcQOvrFacEgo4npZ7R+llsSxF3j+BmuuT5IZRBR9Clcye8EmsAoSXYahXMVEodc5JYR5yp6WkxPRP84YQ8FHBqjkMPwXRudMjeiCZ55uE1Og42pK6p88hCFdbWAZg1jMgAuDA/52s7tmaKZAN+BlYkSSAkr+RZR0eKtE+fOSeo86hCNdbWAdiVEy/DlymS8QspDVHGCZJjFy5q0QnbUQsunBq0MOGCKHnVNaNDHZdxZCx1HkkAxiysrWW+zgXq5EW0S38bBVODg9usbLmd2OKShgY3qM9jbJBn9cY9kEfyqiNQt/Z2d7bOdeTTjCYxRqzZcdYBaD2Q8gX7RZhX7lc3gB07eajz+++f05b1LIZmZhfiWR2zaiRv5FFXoG6pY+o6sj0CazC2AYDYKuFZXcJvRffwodXt2CYvT4mZ2eA7JHb+PCyaHROnXsV2Op1X8kKeyJuuQJ1St7A+4vChw7qy2ZJuLcY2AJAnWYNBl2u0tszTUYQ89rLbs2efFZeNZJ2dBjp1TqInqKOR70jYqkjkgby4cTStSu7o1u54MDJ1nM8Hf/aIE0aIrerT0plmAwAtIkp+3wkxHXH27dsvuA0tPXnHLuh11GZVNDE9I+axbkIn2BvpiXkyb/JAXnQG6pI6pW6p48hCHWxtAqAsiB8DqZE41fFstIMHV6uHc+cvwCroZ4MNfoKgjPnjMIDIPJiXBX5NnY1qgFGH1CUDdav1/LnqjGvuiSliq+bxZgvYKy3fwOdqI4b1e/v2HaK/fwDHt1bEmTMfuMp2Ho14L2eM0AJNz89boGA7TMfgL2mSNoHHvLxYPcq2ABndBDZnqEvqlLqNMDy3hq0NLNSdA1OWqVR/uiFmiD/YIfnv/3nFajR3XegUw0ONFcehhUkUzPjE5fUFTNPTs+LggX2u90QmKNgTncN/BzY75+EwdGv3uu8gQUcfPms+lxbWow7ZSTl56gzknLIocPPxbdsGxLbBQdHR3taQKqvey5en1zoeRxrGC+PFKqY251R3ShrVRNtMUY1hD5LBzUnCefLeeyfF+2fPWJnt2L4Ni5OGoOzVHfA5R3oZU0nj45fF7Gz9Ef1O7I985PDBpgXkVBKe0dGG3Ve55W2G/2gqcIcqVCsWCVar/COAyRs7Fss4k20ZC8P9Bn5gJ945CctXf3iGa6a3bx8QA319Fm/Mb3W877y4ND5pZb8XHY9rrz3olxXP6aGpyd6CHIa+Ng3y1gUgc5ouVr4DvT7iOVefCVmQv/vdy1DmlaGJNlojbIlhHze1VRZt2DV///49YrC/f6uosXw/OTUlTp8+i/UczoBMq21ii5LlKu+ZjvYOcfPNt6yDMwpB8Z1+t6+Q+Xq9vBsCcF6pnSsldRpf9+oZWvVSa352afyiePPN445z6cGG3IVCJ04GGtuQpr+/TxzYvxvVaTLOEGHH4dTpc2JqaqPDAM/6KBYxWD3nfJz0+g/fEGnbD1avnM3L/V1S1p1nrdsGZOkxwVSx8jRu/3xDaYb4Y8f2nWJ296w4d+5sw1w5tLADBTO0cwjgWx3fGhgYEG+PvrU+2MyCZFW9d/cusWPHtvWqsyHRiF6wKr90aUK8f+68VZXbbFhnp4x8CLzvtB4Vi0Vx8eIF/I+hR32lhrDj29fdu/dECj7ygabJ013SqAs+vm9oAfmyWFR70HQ+yTYhf0cVxsbOo0d8GspenctlW2zbth1iaGhI9PXVr17nMbPwxvHXNhUQq6lrhodQMIOxASKBN4722gdjmAtHZ6U68AO74fqPiK7u+vvjTE9PiQsXLoiJiUvrA+ur430HxPDwrmpSod+zzdcu5MFCQTa0IE0BSI6nFypPo/d2f+jc18lwCV4t7BE6PW5q2WrA4/hXFE5tYO9x164h9CQHImsfsZ07MXlZfHD+IhYKbQQe+d2Oj+zI4RHR1qSnWy0XvVxoLdvXOmvV76K4B7i+19eZeaBZ3lsCcKasDmE/urfxlWaaEYrzu4nJcfHOiRMbOjQ2vyyw/r5eC4h9fT3arSKtHYeJCLwpjAnWm5Nmx+HwkSPgabvNZuKusH4VbKZ+Habe3m3G/JYAZGL0iH8Ivd3djFDc33GfwVOnTorzYx80nPHgdsBHDh3EdnB6zu5hO/TEu+813PMQhSZ2DV8jDhw46Hhr4rjqHaL8CD3fe7bizxEAYQUPwwq+jq+3YyuCcX/PauoMxhcvoF1Ja1Qbdu8eFrt3Ddc+DuT3ufNj6FBt7KGTMIE3hPbaPozXOW1eBMKQJiKQZxHW78Zax4N62TXsBVdHJqGphcoTePbX1c+TeM8CHkG7at/e/eLs+2esnmS1V4yb7eDcyl9Lm52pnejB7927DzMvif+219WBD/uJvpzxzvqDJjeOLCDTg2h+pqSO43qgCb3EvWIbjG3ESxcvYupvEq5KOfGRGz6kRY7XXn9LlGCBB+EQumPnTquNF7cjVP0KDut3qjcvr8fVkVu3IwtIpkhwtqweqlTUz/0yGaf0BADHG/m/ghmH42+9ro29DutA7t8XWczQpDVgpuohp+CjDja5YzVTTE9OPgck/rRZnCS/IzB6e/qsRTtBy8G2J2mnGXzEhoURF8pzBUDSzUn5FWRUf2bcRcZxjcrZlCKcN4MOpGnP1ARNOxb0gAkLGy6ZcQ3AfF6egYn9G5f5JCZ6AQukZmeD3z2KNEk7rYGYIDbcyucagMygNyeeQIYvus0sCfEL+U743V0OdEsPbg9CmqSdxkAsEBNeZPMEQGRYacvLe+DntXmOywsXMUpDd68svGZOvPOe5drklzWONZIWabo5aNpvvmGlJwYsLAATXvL0BEBm1CnlmMjIewFGvStqvEjlMw3XzHIZ42tvvGl5ZXtZm8I0XAb5f6+/adGKbB2uT100S26VPTBgYaFZxCbvfI0H9OXk83BWeBz0/6pJHol71Qfv4omJcWu7kHfePRUI/6SZuqDU4xhwft6PXJ4toJ1pb8F4FL3iX9u/03DduWMo0LlYzjGTZqoCytwqe59C+QYg24PtSt6NtsC4T15ik5yu/9d/+MZA2mzQj0WLNNMSWNZWmXts91XrwfFUXHWievdYxPQJHBd4DHN2q27J9SIl7FkJ63ZPnXpPzMxM13XlaiYOXap6e7EU4MC1mN7LN4uarHcY78OSrKNYZPRKEIwHBkAyA6+Zz8Fr5mfo+flqWwYhWItG8BqANV+Bl8sdcE75ZVDUfVfB1YyQMTD5Zfxv9nOqjti6T5wGWKYs2yDBRyUECkAShCfED3Bq71d53wrp0QDLlGUbtESBA5AM9hfkk2h7exoZD1rAFj3/GmBZskz9U9pMIdA2YDV5tAPlTNH8Z9TFD1Q/b90nSwMAyNMYbnlQV7NKiwWkisnwKuMtS5gsyF3hlpZPJ/gsnFzJTt/dVFE9LIX6e1pFfbm0KAelARoPtvl0VbvVfIYGCLjz3wsA/iv+W0M01SUQs3uAbwX/X9bR4agnamgAZOYcJ8TmOc+mabC6nlIT+4yDzIa8M+ihlmb6CBWAZIQzJrCCP8eeIclddd1Mowl9x+k1WL4vBDXD4VQN2johjRiggG1CfjRtDgyN5E3EczgWsEzCBh91EzoAmWlnpzzfl5dHYX7/Dl9d6vwJKWMSAnXPMmBZsEyi4Dn0KrhWyOmy+qyoKMyeqMb78NYmav32rQFUuZfoUEyfTt/EfBCIHIDkfUGp4eWSwv4z6jYfsrSSOtQALN+LdKP348nsMKsto0VSBddyRUWg2/8ZaRh/meYln7Vyh/4bvVzqmLqOA/gofywsYHVBlEpqX1mppzBUc0f189a9Tw1I+TOs233Iy9JJnzk3TR47ANrcYhuQ2zFm+BSq5QP2s9bVvQZQ3Z7idhludyxwn5O3FLEFIMUB+PLTRfObUOIjuE/GDuPeyiHwVNDZInT2RF/BeAz3jjYKCpwJBwRjDUCb/9X9Cc1vocXwRSg1sTu12vLovAJsWJ+rfoK23qOY0XC0RZpOfrainQgA2kIAiIdUxfwGOir3AYjpWeVjC+jjCuAto8p4RmaMbwN4TbfF9ZFN4EkTBUBbeu7ejxPdHsFY1gMAYmTnmNj8RHkF8Mo8CqFDGN9ttht9lDw2yzuRALQFWj1Mx3xYKHk/CiGyY8VsfsK84uObFFJ9L5s3nmx0CEyY/HjNK9EAtIVmdTxdFJ+HG9uX8Ox2/E5lhwXWjmc5PMeD//oK4hdWtWsrIaHXVACwWvczSg2oorgL1oHtxFuq3yX1HkB7GVb+GZ63W+/I06TKRb5TB8DqwrB6z0rcicb5p7E25VZck7FCHMMmKJjforP1Atzin01Cb7Za727uUw3AakXAGnbMl8UtK6Z5FAVLTxz6JcaiJ82qFB/IK/hAjmUN41hXTryMZ40PgasWLOH3Vw0Aa8sJ4OucWRSfwml6N0nTHMGq6xHcj6AzM1AbN8jf6DxcRr0zilUXo8owRnH/am+H+A0A5+4o9CCZipDWVQvARjqfVWqbKImRihQjUpn4FzsAzm6Asxtg6cZqHXQ6cb/226KjxBzezeHdHN7N4531GyCbwzKsS0oaoxklRkVejPZIOdEo76vx+f8DYi06xjCLKmEAAAAASUVORK5CYII="},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAF4VJREFUeAHtXXuMJMV9/lXP7s7O3mPvbg/IHSA46/BCsCwbyealOKfDJH4cWIkQKA4gWRArkSIskYAxsWNZtokDDlL4J0qCZQkjLBBShH0ODjanCxGYyx/4BcSrO+4hjjv29vZ25+52Zmdnpivf17MzOzM7j+6Zrp6e2Spp1N3VVV/96qtv6tXV1Uqsq2HgrNZbJSuTRSWTSruTouUCUWoDjhu0Eu+olo/CI52Wczg/p5ePavkoWtN/RitnKqFlSlIytVGp0zUJrvELtVbzr7Vel87JjRDPNcp1J7VSFNukFr3FJCdK1BmIckppPaUdZwrnb4wn5VWl1ILJdOOKvWYECMElzy/KdQXX3Y0abTcyfi38huNQMBBfXoscQI25b8hx9q0fldfhl4uDbaZtGGgBphf1FWgWb0PB3oQCvgHHlGlCQ8FXKouCeQ1/lJfR3D8/PqoOhoIbQ5CBE2Ba6y06I3eI0nehhrs+hpwHNgm14S9Eqx+oMXl2XKEJHyA3EAJkUzqfkc8qiA5lswfXIwNURpWsQIhLuNirIcZNY/ITNt2Vm3160tcCPK/1RYWsez9qh3sweJjo0zLoyGwMZmZRy39vKOU8vl6p6Y5AYhCpLwWYyehLc+I+iEK4F7XdaAx47JkJqAUX8ed7MinOo2Nj6t2eGdJhwn0lQAwqduqi+xA653ez2e0wzwMZzWuOtX5KJZzvYNByqF8y2RcC9EazrvsNEXU7hJfoF3J7YSeEWMTM+HPKcb7eD6PnWAsQYkvNZ9yHQeoDOE/2okD7NU1wlgNnj20acx7BeTau+YitAM8u6j2uq58AiTviSl4/2AXxHXEcdd/GUbU3jvbGToDZrL5sUet/xqTx5+JIWN/apNQLo0p9KZVSx+KUBycuxqCmS8xn9UMQ39tWfAZKBX9ockuOybWBFDqCjEUNuKD1tnxWPwNidnWUCxspEANolvcPp9Tn1yl1MlBEA4F7LsD5RX2zFPXTmMu60ED+LGQTBjCHekoS6s5No+pnTYJE4t2zJthrcheK3xJX/9SKL5KyrknE4xzcz6MMetkk96QGXFjQ25eU/iH6ep+oYcVe9IYBpV4Z0erP1q1TJ6I2IHIBpjOa6/B+jH/gBVFn1qbXnAE0yTPoG94yPqYONA8V/p1Im2A80fi0K3qfFV/4BdktIsuEZcMy6hYrSPzIBJjO6ju1q3+EZncsiIE2bIQMoGxYRiyrqFKNRIBzGX0/mt2n8BuKKmM2nc4YYBmxrFhmnSEEi2W0D4iMqHTW/Ucsi38gmFk2dBwYwOsAj42nnC+jb4g3Gsw4YwL0xJdx/x2W32PGdIsaBQMQyJPjY84XTYnQWBPs1XxWfFFoxGgaqEDuZVmaSsRIDej1H7T7T6aMtrg9YEA5f7N5TD0edsqhC9Ab7ZYGHKFjh515i+efATbB+N09nlJP+4/VPmSoIuEcEofxHEm1T9qG6DcGIMCCctStWGn9Yli2hyZAPuHgRKad5wuraGKKo1TGEbU7rCcmoQiQz3bzon9ln3DEVDQhm8XHdsOiPhLGs+OuR8FobhNcWGDFF3IpxxiOZe2VeQgLW7sWYDqDt9XsqpYYy8WQaShzr+y7hO+qCfYWk3I9n9ZdC7nLfNjoPWAAgxJXHPWpbha1dixAbxl9xuv32ZXMPSj8uCTJldXDY+gPdri8vyMBst+H+b6f47grKiLOnCvI1InSlnmT25OyZUNvZ3riZk9U5dAoHdSE+zE/+Ekc8VJ8MNdR05leFL4ovitYUt2FpvhyBe39ykLsDrG72HGzp7vcdBebWqAmOkEJXI0sv7f7tU4S6yYOxVd21edlv6iP1TZUn0dpBwpeiu6SuMWCaBeVj3ZLySvM1DkJcRJDknBGsJVORw1doKzAlq9BGz8M+t5x4BoQ75Y+YSebA5VN6IExDSL5fFZyi2kpLGUhQMzCQnz8i3o/nNOP9xiGYRnHqMNiVk8bARMJJEBul4Gc3howDRs8RAaKbl6WsmkpFvxvIc2wXhzENeqgDU8jARLxLUBUsSnu1RIA2wYNmYEChJTPLXRUl7H+Y1ximHTL+/mk/KbhW4DcpQoi3OEX2IYLlwHWfAU0pd06YhDLlKNGqBW/+L4EyP350JF90C+oDRcuA+y/FVB7heWIZbJPCK08QM34sdeXADU2h4SyB3Ljbz8k9TpMIb/YUbPbzG42x8Q05aCVJDXjB7+tAKHkndyZ1A+YDRM+AyjMQAMOvxZwYEJsc07dXtJO6xTaCpB7MsPQ2Gzn1To7g3eX83ymnElsasbbz7uN8S0FyN3ouSF4Gwx72yADnGQ25UxiezZDO56GWmSgpQD5KQQo2e5G34JA07e8JxyGEjGJTZOpHWqolflNBciPwGClw72tItt75hngEw5TziR22WZqiFoqX9cfmwqQXyCCgtf0R2DqyerFNcrAWLImsctGU0Pe16zKHnXHhgJEpGF+/qourL3sAQP5vLk+oEnsGqr4KbUmXbmGAuSH/zBRuaa+vVZDWIwuFnPmRsEmsasppJaoqWq/8nlDAS5/dbIcxh57yMDc/Lyx1E1i1xvdTFOrBMjv7SLynnoAe90bBubnzhpL2CR2A6P3LGur5tYqAfJjz2iv7WO3Gpp6eIHFpKdmZkM3wMOMYKFq2XBqyvuQeNlj+bhKgPgGrZ14riOpl5epVEqOv3dCisXAr1s0NZtYxCR2pK70QfGaJGsEyBUMUOp1NSHsRU8ZmJiYkKWlvBw6fDQ0O4hFTGJH6aCt6+tXydQIEFNOt0VpkE2rPQNbJ0ofE5ibS8vRY8fbR2gTghjEoitjt4kS6u16jdUIEM9Obgo1NQvWNQPJZFK2bdvu4bw/fUqmDr7TUXPMZpdxiUFHTGJH7uo0VhEgqsck5txviNwgm2BbBi6//AMylCgtSGLt9evfvh1oYMIBB+OUaz5iEbMXjhqj1sppV17LPL8o16EGjLhXWjbDHlsxkBwZkSuvulrefPM3XjD23w4fOYaBxEnZvHlcNm8al9HkiIwMl9aNLOXzwknmufm0J7qlpdrJbGIRsycOGju/qDjO+G+mXxFgwXV398Qgm6gvBrZObJWdO6+QQ4cOVsJTWNPTM96v4tnmhBjE6qVb1ponwEoTjHV/VoC9LBUfaV9y8aXyoQ99uNIc+4hSCcJml3GJ0XNXpTVPgGiT1ymRa3tumDWgLQOsvT728esrA5O2ERCAAw7G6XXNV7aVWqPmeO01wemc3AgPu/C0zFDMj+y/TX7wSrn8sh1yenZGZmdn5Uwab82VX7d0hmXL+Dpvno9TLT0Z7bbgkFpL59SNCPJSqQ+o5ZoW4e2tmDJAYV28/RLvt/+t8zVWfvjq9TXXsbsoae4lrwlWrjsZOwOtQQPNQFlzXg2ID0BMYgpmoDMcRuamsTHBfnzS+X9OKjl0Zr3M59Gbgds0rOX5OSV/sE3LLswZX2Qns9rS7WkOocpNsK0BW1A2g3e4/+UtJS8cQTdLl0SHd6UrMaZzSqZPirwKYT76Sy2f2yHyV1drucC+0FDhaNWJFk9zzlmtt2LFKtcAWteAAdZ4f/Kikv84rKrE1yDgshcFyrCMw7jWNWaAmqP2HMmWlNg42Nr2feaQyP2vKlkorNR2fhlhHMYlhnVNGID2nKKyAmxED2uv7/5SYU+W4OIr4zEuMWxNWGak9kjtOUrbEXAtLSLs8331QHfiK2NShMQipnW1DFB7EKDYzyzU8uINODppdutgKpfE4iDGuloGqD0Hw+ENtd5r+4pTLRzthu2ISWzrVhig9hx0cqwAVzjx+msrUy1VN7o8JabtC9aRCO1hP38rwGpaOMlsypnENmWzUVxoz8EDkJg/NDRKwSrw47WPVFfd78bDJHY3dvUqLrXn4NVQ2wRXlcB0puoi5FOT2CGbGgkctWf7gHVUFw0+EzeJXZeN/ri0fcDV5aRcc7tRmcRenZM+8PFqwD6wM0oT80vmPuRiEjtKjsJMi03wuTAB+x3r3NnSS9sm8mES24S9xjGhPU7DWAFWMZ1b4G5UJtZG4lOzHnZVYmv9FNrjNIwVYJUQLsRi0vPz4e9GRUxiW7fCALVna8AVPryzHZuTMj9zsvT93bp7nV5yN3piEtu6KgZYA+KBsK0Bqzj5oys24IuSBZl57yi/M1B1p8NTYBCLmMS2boUBas/WgCt8eGefuXJcHDyNy5w/K2dOvdedCCE+YhCLmMS2roqBUg2oDT58qkqsT04v3jAsf/7RCc/as2dm5NTxwx01x2x2GZcYdMQktnVVDGiNQQh2gK3ysqdg4Cu7fk/Wj3hvrHq113vvvI2ByWnc8dMkay8s47DmoyMWMa2rYwDrdIe0cqbwF6+7s7Yvt60fkn/908vkzmePeN1A9t9On3wXA4n3ZWzjuKTWb5Th4aQkhko1WrGQl3w+J1kILoN5xAKuy47bMBOLmNbVMkDtDSW0TIW3+3BtAv189ZkPbpRH/ni7PPxfJypjEQrr7JnT3s9P3ig+YhDLutUMUHuOpGRq9S3rQwb+8uMXyNN37Kg0x0FYYbPLuMSwrgkD0J6zUanT+KDcmSZB1rw3a6///eur5K5rJryRbDtCONplWMaxNV9ztqg5aq/UMVGoBbVc3zz42r7D/tsTey6RL//hRfKfv0vLSwfPydt4weNMttR52ZJKyO9jPw7O83GqxY52feiFmoPzBKi0nsL4zgqwDW8U1l98bKv3q9+Nalfcd6Nqk7eob1NzTNOba9AORsLWWQYiZKCsudJkl5I3IkzbJmUZ4N5OnuY8AY4n5VWl1MrklSXIMmCQAWqNmmMSngDhsYA+4AGDaVpoy0CFAWqNmqNHqQnmmdb7eLDOMmCcgSqtVZ4PDTnOPny/4e+NJx4gAWxmLUV3SdxiQT56aVGGMXVOl8e2SktLC+IkhiThjOALE5h8s65vGKDWysZWBLh+VF6fz6osasKer9vF5oVSyC9KsZAr2ynJqoUkSUdDlHnvV8AGh4mhpAwNj6Jfa4VYISyuJ0plqbWyeZUmGLUINpqV18o3enUs4lMDS9l0jfja2UKhenHKnyloF8He7xkD1Bi1VjagIkDPQ6mXyzd6cSxASPncgq9FT/X2sXFmXGJYF2MG6jRWI0B0pZ7vlems+Qr57vcvIwaxrIsnA/UaqxHg+Kg6iOrxF1Gb7vX5UHuF5QpeLVoasISFaXG6Z4DaosaqkWoE6N3Q6gfVAaI454AjTLkQi5jWxYyBBtpaJUA1Js9CqbUfmDWYD2+qxUC/jQMTYlsXDwaoKWqr3ppVAhxX3trAvfUBTV1zns+UM4ltyuYBxt27rK2aLK4SIO/qBlVlTawQLzjJbMqZxDZl86DiNtNUQwFuGpOfYFI3/P0pGrDL1xdNOZPYpmweRFxqiZpqlLeGAkR7nRelv9coQth+2uAbeSaxw+ZhoPGgJU9TDTLZUIAMN5RyHkck40NJkwMFk9gNuLReDRighqilBrc8r6YCXK/UNObnnmwWMSz/fN5cH9Akdlj5H3QcaohaapbPpgJkhKQ4jzarOpsBBvVfzJkbBZvEDprPtRie2qGGWuW9pQDHxtS7GBI/1Qqg23tz8/PdQjSNbxK7aaL2xgoD0I6noRWfVWctBcjQKuF8B0o2NlSdnyvtn7LKshA8TGKHYN5AQ1Az1E67TLYVIJ7dHcLM4HPtgDq+j6fTp2bCn/HxMO1C1Y6LpfuI+rmSdlojtRUgoyvH+ToUbWSdUyqVkuPvnZBiMbxKlljEJLZ10TNArVAzflL2JUCuYMCUxmN+AIOGmZiYwPL6vBw6fDRo1KbhiUVMYlsXPQPUSv2ql2ZW+BIgI28acx6Bso80A+rUf+tEafOeubm0HD12vFOYSjxiEIuujF25aU+MM0CNUCt+E/ItQABnHUfd5xfYb7hkMinbtm33gr8/fUqmDr7TUXPMZpdxiUFHTGJbFy0D1Ai14jdV3wIk4MZRtRevoL3gF9xvuMsv/4AMJRJecNZev/7t24EGJhxwME655iMWMa2LmAFow9NIgGQrb8X5jTOq1JfwfO5mzA+O+Y3TLlxyZESuvOpqefPN33hB2X87fOQYBhInZfPmcdm8aVxGkyMyMlx6NW4pnxdOMs/Npz3RLS3VTmYTi5jWRciAUhlqI2iKgQWYSqlj81n9TXQ0/yFoYq3Cb53YKjt3XiGHDq2s2KawpqdnvF+ruNX3iEEs0y45pCRXKC145XmvXa/tQbP7TWojKA8dMQfxJdJZ/XMcdwVNsF3407On5Xf/95YUAk7LsNllzReF+JiHM+cKMnWiNDM1uT0pWzYE/i+3oyLQ/V7aA/HtH0+pT+IYeC6tIwGSmQWtt+Uz+ld42HxhIKZ8BM6h5jt69LCcPHnCR+jSgIN9Ptvs+qIr1EBY63dqeEx9ZJ1SJzsB7liATGx+Ud8srv4pasJAgxm/huZyOTk9OyOzs7OSzWYxt1eqcUZGkt4kM+f5ONViR7t+GQ03HGo8F/sWf2rTqPpZp8hdCZCJzi8Uv4We0N91aoCN178MQDzf3rQu8dVuctC1ANkfxKBkH0bFn+jGEBu3zxhQ6pVNKbW7k35fdU67FiDBFhb09rx4/cHSY43qFOz5wDGAft/MsKDft07566S3YCCUvhsNwT/hFkxSZ1qkZW8NAgMoY5Z1GOIjHaEIkEDjY+oAHsPcBuPMrbFnQtb1jAGWLcuYZR2WEaEJkAZhBcSLMPIL+JVmaMOy0uL0nAGWKcuWZRymMaEKkIZhQvJpLepvwzTSYvWeAZYpyzZsS0IXIA3cPKbwSqcYWT8YNgEWrz0DLEuWafuQwUOEMgpulCymZ1Q64/4b2uJ7G923fv3BAATy5PiY80VT3SojNSCppcElw21N2B9SW20laz6T4vN0sjrZ8H3mMvp+Jfq7rBXDR7eIYTPAyoN9PlPNbrW9kQkCq2fuhAC/j19vl41U596er2IA4ivg9wUTA45VicEjMgEy8fSi/rTr6ufDXMzaKFPWr0MGMMnszfOFPNXSyppIBUhD0hl9LWrBH2MZl31s16pkIr7Hx2uo+W4Jc5LZTxaMDUKaJc4M8jkiRimvNAtj/SNmAGXBMolafMxl5AJkonyO6K2kwHIe/Otc+lkXPQPkHk3gt1kWYT3bDZqLyJvgegO9Ra1Fjacn4a+srk/LXq8wwJXMklB3drOYdAWt87OeC5Cme8v7s/oZ9A13dZ4VG9MvA6j59g+n1Oc7XUbvNx0/4XrSBNcbRiK8l1oc5yt2SVc9OyFecykVOCbXcRAfcxaLGrCa4mxWX7ao9ROYqrm12t+ed8mAUj/Ce7v3dfLqZJcpt4weOwGWrT27qPdgzvAJNMs7yn72GJwBNLdHuF1G0B0LgqfUWYzYCpDZgfhS8xn3YZD4IM7tVgcByhic5cDZY8ubSvneqyVAEqEEjbUAyznEE5QrtOt+Az2G20FqaROZ8k17rGEAwsPL4fo57s/nd4u0GoCIL/pCgGVOIMSduug+hIHK3RBi1TfUyyHW7hHCw3th+iluiwvhYVfb/nB9JcAypZmMvjQn7oOYy7oXQhwt+6/FI4S3yE8hcDf6dhuCx5GfvhRgmcjzWl9UyLr3i1b3oBDW1Hao+PPN8mtW/AhMq+9wlLmK67GvBVgmlc3xfEY+i2Vsd8FvD64HcsCC2o770O3lh/+87/mx2e1zNxACrC6DtNZbdEbuQO3AfuJ11ff69RzCex21/FP83m6jT572a75o98AJsLowvNGzltvQOb8J76bcgGN/bJuPLW5RMK9hsPUylsU/3w+j2Wreg5wPtACriUBtmDy/KNcVXHc3CnY3Ms51ibEYSXMEiz/IAfxB9g05zr71o/I6/EpbgVVnYgDP14wA68sO4luXzsmNouUa5bqTeOt6EueTGMxsqQ8b5jUGD2fQ7kzhrYsp7ThTOH9jPCmvQnALYabTL1hrVoDNCuis1lslK5NFJZNKu/jJhRDnBohzA8SyAW/rYNCJ8+VrD0fLOdw7h3vncO887nnXENk5vIZ1SitnKqFlSlIytVGp083SXov+/w8nKDA07uUpHQAAAABJRU5ErkJggg=="},function(s,t,a){"use strict";function l(s,t){"length"in s||(s=[s]),s=i.call(s);for(;s.length;){var a=s.shift(),l=t(a);if(l)return l;a.childNodes&&a.childNodes.length&&(s=i.call(a.childNodes).concat(s))}}function e(){for(var s={},t=f.length,a=0;a1&&(t=Array.prototype.slice.call(arguments)),s(t))};return"conversion"in s&&(t.conversion=s.conversion),t}function c(s){var t=function(t){if(void 0===t||null===t)return t;arguments.length>1&&(t=Array.prototype.slice.call(arguments));var a=s(t);if("object"==typeof a)for(var l=a.length,e=0;e.04045?Math.pow((t+.055)/1.055,2.4):t/12.92,a=a>.04045?Math.pow((a+.055)/1.055,2.4):a/12.92,l=l>.04045?Math.pow((l+.055)/1.055,2.4):l/12.92,[100*(.4124*t+.3576*a+.1805*l),100*(.2126*t+.7152*a+.0722*l),100*(.0193*t+.1192*a+.9505*l)]},n.rgb.lab=function(s){var t,a,l,e=n.rgb.xyz(s),r=e[0],v=e[1],_=e[2];return r/=95.047,v/=100,_/=108.883,r=r>.008856?Math.pow(r,1/3):7.787*r+16/116,v=v>.008856?Math.pow(v,1/3):7.787*v+16/116,_=_>.008856?Math.pow(_,1/3):7.787*_+16/116,t=116*v-16,a=500*(r-v),l=200*(v-_),[t,a,l]},n.hsl.rgb=function(s){var t,a,l,e,n,r=s[0]/360,v=s[1]/100,_=s[2]/100;if(0===v)return n=255*_,[n,n,n];a=_<.5?_*(1+v):_+v-_*v,t=2*_-a,e=[0,0,0];for(var c=0;c<3;c++)l=r+1/3*-(c-1),l<0&&l++,l>1&&l--,n=6*l<1?t+6*(a-t)*l:2*l<1?a:3*l<2?t+(a-t)*(2/3-l)*6:t,e[c]=255*n;return e},n.hsl.hsv=function(s){var t,a,l=s[0],e=s[1]/100,n=s[2]/100,r=e,v=Math.max(n,.01);return n*=2,e*=n<=1?n:2-n,r*=v<=1?v:2-v,a=(n+e)/2,t=0===n?2*r/(v+r):2*e/(n+e),[l,100*t,100*a]},n.hsv.rgb=function(s){var t=s[0]/60,a=s[1]/100,l=s[2]/100,e=Math.floor(t)%6,n=t-Math.floor(t),r=255*l*(1-a),v=255*l*(1-a*n),_=255*l*(1-a*(1-n));switch(l*=255,e){case 0:return[l,_,r];case 1:return[v,l,r];case 2:return[r,l,_];case 3:return[r,v,l];case 4:return[_,r,l];case 5:return[l,r,v]}},n.hsv.hsl=function(s){var t,a,l,e=s[0],n=s[1]/100,r=s[2]/100,v=Math.max(r,.01);return l=(2-n)*r,t=(2-n)*v,a=n*v,a/=t<=1?t:2-t,a=a||0,l/=2,[e,100*a,100*l]},n.hwb.rgb=function(s){var t,a,l,e,n=s[0]/360,r=s[1]/100,v=s[2]/100,_=r+v;_>1&&(r/=_,v/=_),t=Math.floor(6*n),a=1-v,l=6*n-t,0!=(1&t)&&(l=1-l),e=r+l*(a-r);var c,i,o;switch(t){default:case 6:case 0:c=a,i=e,o=r;break;case 1:c=e,i=a,o=r;break;case 2:c=r,i=a,o=e;break;case 3:c=r,i=e,o=a;break;case 4:c=e,i=r,o=a;break;case 5:c=a,i=r,o=e}return[255*c,255*i,255*o]},n.cmyk.rgb=function(s){var t,a,l,e=s[0]/100,n=s[1]/100,r=s[2]/100,v=s[3]/100;return t=1-Math.min(1,e*(1-v)+v),a=1-Math.min(1,n*(1-v)+v),l=1-Math.min(1,r*(1-v)+v),[255*t,255*a,255*l]},n.xyz.rgb=function(s){var t,a,l,e=s[0]/100,n=s[1]/100,r=s[2]/100;return t=3.2406*e+-1.5372*n+-.4986*r,a=-.9689*e+1.8758*n+.0415*r,l=.0557*e+-.204*n+1.057*r,t=t>.0031308?1.055*Math.pow(t,1/2.4)-.055:12.92*t,a=a>.0031308?1.055*Math.pow(a,1/2.4)-.055:12.92*a,l=l>.0031308?1.055*Math.pow(l,1/2.4)-.055:12.92*l,t=Math.min(Math.max(0,t),1),a=Math.min(Math.max(0,a),1),l=Math.min(Math.max(0,l),1),[255*t,255*a,255*l]},n.xyz.lab=function(s){var t,a,l,e=s[0],n=s[1],r=s[2];return e/=95.047,n/=100,r/=108.883,e=e>.008856?Math.pow(e,1/3):7.787*e+16/116,n=n>.008856?Math.pow(n,1/3):7.787*n+16/116,r=r>.008856?Math.pow(r,1/3):7.787*r+16/116,t=116*n-16,a=500*(e-n),l=200*(n-r),[t,a,l]},n.lab.xyz=function(s){var t,a,l,e=s[0],n=s[1],r=s[2];a=(e+16)/116,t=n/500+a,l=a-r/200;var v=Math.pow(a,3),_=Math.pow(t,3),c=Math.pow(l,3);return a=v>.008856?v:(a-16/116)/7.787,t=_>.008856?_:(t-16/116)/7.787,l=c>.008856?c:(l-16/116)/7.787,t*=95.047,a*=100,l*=108.883,[t,a,l]},n.lab.lch=function(s){var t,a,l,e=s[0],n=s[1],r=s[2];return t=Math.atan2(r,n),a=360*t/2/Math.PI,a<0&&(a+=360),l=Math.sqrt(n*n+r*r),[e,l,a]},n.lch.lab=function(s){var t,a,l,e=s[0],n=s[1];return l=s[2]/360*2*Math.PI,t=n*Math.cos(l),a=n*Math.sin(l),[e,t,a]},n.rgb.ansi16=function(s){var t=s[0],a=s[1],l=s[2],e=1 in arguments?arguments[1]:n.rgb.hsv(s)[2];if(0===(e=Math.round(e/50)))return 30;var r=30+(Math.round(l/255)<<2|Math.round(a/255)<<1|Math.round(t/255));return 2===e&&(r+=60),r},n.hsv.ansi16=function(s){return n.rgb.ansi16(n.hsv.rgb(s),s[2])},n.rgb.ansi256=function(s){var t=s[0],a=s[1],l=s[2];return t===a&&a===l?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(a/255*5)+Math.round(l/255*5)},n.ansi16.rgb=function(s){var t=s%10;if(0===t||7===t)return s>50&&(t+=3.5),t=t/10.5*255,[t,t,t];var a=.5*(1+~~(s>50));return[(1&t)*a*255,(t>>1&1)*a*255,(t>>2&1)*a*255]},n.ansi256.rgb=function(s){if(s>=232){var t=10*(s-232)+8;return[t,t,t]}s-=16;var a;return[Math.floor(s/36)/5*255,Math.floor((a=s%36)/6)/5*255,a%6/5*255]},n.rgb.hex=function(s){var t=((255&Math.round(s[0]))<<16)+((255&Math.round(s[1]))<<8)+(255&Math.round(s[2])),a=t.toString(16).toUpperCase();return"000000".substring(a.length)+a},n.hex.rgb=function(s){var t=s.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];var a=t[0];3===t[0].length&&(a=a.split("").map(function(s){return s+s}).join(""));var l=parseInt(a,16);return[l>>16&255,l>>8&255,255&l]},n.rgb.hcg=function(s){var t,a,l=s[0]/255,e=s[1]/255,n=s[2]/255,r=Math.max(Math.max(l,e),n),v=Math.min(Math.min(l,e),n),_=r-v;return t=_<1?v/(1-_):0,a=_<=0?0:r===l?(e-n)/_%6:r===e?2+(n-l)/_:4+(l-e)/_+4,a/=6,a%=1,[360*a,100*_,100*t]},n.hsl.hcg=function(s){var t=s[1]/100,a=s[2]/100,l=1,e=0;return l=a<.5?2*t*a:2*t*(1-a),l<1&&(e=(a-.5*l)/(1-l)),[s[0],100*l,100*e]},n.hsv.hcg=function(s){var t=s[1]/100,a=s[2]/100,l=t*a,e=0;return l<1&&(e=(a-l)/(1-l)),[s[0],100*l,100*e]},n.hcg.rgb=function(s){var t=s[0]/360,a=s[1]/100,l=s[2]/100;if(0===a)return[255*l,255*l,255*l];var e=[0,0,0],n=t%1*6,r=n%1,v=1-r,_=0;switch(Math.floor(n)){case 0:e[0]=1,e[1]=r,e[2]=0;break;case 1:e[0]=v,e[1]=1,e[2]=0;break;case 2:e[0]=0,e[1]=1,e[2]=r;break;case 3:e[0]=0,e[1]=v,e[2]=1;break;case 4:e[0]=r,e[1]=0,e[2]=1;break;default:e[0]=1,e[1]=0,e[2]=v}return _=(1-a)*l,[255*(a*e[0]+_),255*(a*e[1]+_),255*(a*e[2]+_)]},n.hcg.hsv=function(s){var t=s[1]/100,a=s[2]/100,l=t+a*(1-t),e=0;return l>0&&(e=t/l),[s[0],100*e,100*l]},n.hcg.hsl=function(s){var t=s[1]/100,a=s[2]/100,l=a*(1-t)+.5*t,e=0;return l>0&&l<.5?e=t/(2*l):l>=.5&&l<1&&(e=t/(2*(1-l))),[s[0],100*e,100*l]},n.hcg.hwb=function(s){var t=s[1]/100,a=s[2]/100,l=t+a*(1-t);return[s[0],100*(l-t),100*(1-l)]},n.hwb.hcg=function(s){var t=s[1]/100,a=s[2]/100,l=1-a,e=l-t,n=0;return e<1&&(n=(l-e)/(1-e)),[s[0],100*e,100*n]},n.apple.rgb=function(s){return[s[0]/65535*255,s[1]/65535*255,s[2]/65535*255]},n.rgb.apple=function(s){return[s[0]/255*65535,s[1]/255*65535,s[2]/255*65535]},n.gray.rgb=function(s){return[s[0]/100*255,s[0]/100*255,s[0]/100*255]},n.gray.hsl=n.gray.hsv=function(s){return[0,0,s[0]]},n.gray.hwb=function(s){return[0,100,s[0]]},n.gray.cmyk=function(s){return[0,0,0,s[0]]},n.gray.lab=function(s){return[s[0],0,0]},n.gray.hex=function(s){var t=255&Math.round(s[0]/100*255),a=(t<<16)+(t<<8)+t,l=a.toString(16).toUpperCase();return"000000".substring(l.length)+l},n.rgb.gray=function(s){return[(s[0]+s[1]+s[2])/3/255*100]}}),b=g,f=Object.keys(b),y=function(s){for(var t=n(s),a={},l=Object.keys(t),e=l.length,r=0;rs?e():!0!==t&&(n=setTimeout(l?v:e,void 0===l?s-c:s))}var n,r=0;return"boolean"!=typeof t&&(l=a,a=t,t=void 0),e},T={stageSwitchTransition:800,stageSwitchDelay:0,stageSwitchEasing:"cubic-bezier(.86, 0, .07, 1)",disableAfterSwitching:500,stages:[]},S={scrollNumber:1,transition:200,easing:"ease",items:[]},D=new RegExp(/-?\d+(?:\.\d+)?/,"g"),N=["webkit","ms","moz",""],E=function(s,t){if("string"==typeof s&&(s=document.querySelector(s)),!s||1!==s.nodeType)throw new Error("Cannot find target dom to apply scroll effects");t=d({},[T,t]),s.style.overflow="hidden",this.target=s,this.config=t,this.animating=!1,this.switching=!1,this.stages=[],this.activeStageIndex=0,this.initStages(),this.processStages(),this.defineActiveStage(),this.addEventListeners()};E.prototype.defineActiveStage=function(){var s=this.stages[this.activeStageIndex],t=this;Object.defineProperty(this,"activeStage",{get:function(){return s},set:function(a){if(a!==s){var l=JSON.parse(JSON.stringify(s));s=a,t.activeStageIndex=t.stages.findIndex(function(s){return s===a}),t.handleActiveStageChange(),t.target.dispatchEvent(new CustomEvent("stage-change",{detail:{previous:{id:l.id,node:l.node,config:l.stageConfig,step:l.step},current:{id:a.id,node:a.node,config:a.stageConfig}}}))}}})},E.prototype.addEventListeners=function(){this.boundHandleScroll=this.handleScroll.bind(this),this.throttledHandleStepChange=A(50,!0,this.handleStepChange,!0),document.addEventListener("wheel",this.boundHandleScroll)},E.prototype.removeEventListeners=function(){document.removeEventListener("wheel",this.boundHandleScroll)},E.prototype.initStages=function(){var s=this;o(this.target,function(t){if(1===t.nodeType){var a=t.getAttribute("data-scroll-stage-id");if(a){var l=p(s.config.stages,a);if(!l)throw new Error("\n Missing scrolling config for stage id: "+a+"\n ");t.style.transition="\n "+s.config.stageSwitchTransition+"ms "+s.config.stageSwitchEasing+" "+s.config.stageSwitchDelay+"ms\n ",s.stages.push({node:t,stageConfig:d({},[S,l]),id:a,step:0})}}})},E.prototype.processStages=function(){var s=this;this.stages.forEach(function(t){s.constructor.attachNodeToItems(t),s.processItemEffects(t)})},E.attachNodeToItems=function(s){o(s.node,function(t){if(1===t.nodeType){var a=t.getAttribute("data-scroll-item-id");if(a){var l=p(s.stageConfig.items,a);if(!l)throw new Error("Missing scrolling config for item id: "+a);l.node=t}}})},E.prototype.processItemEffects=function(s){var t=this;s.stageConfig.items.forEach(function(a){a.effects.forEach(function(a){void 0===a.startAt&&(a.startAt=0),void 0===a.endAt&&(a.endAt=Number(s.stageConfig.scrollNumber)),t.constructor.processColorValues(a),a.startNumbers=(a.start.match(D)||[]).map(function(s){return Number(s)}),a.endNumbers=(a.end.match(D)||[]).map(function(s){return Number(s)}),a.strings=a.start.split(D)})})},E.getCurrentStyleValue=function(s,t){var a=s.startAt,l=s.endAt,e=s.startNumbers,n=s.endNumbers,r=s.strings,v=s.isColor;t=Math.min(l,Math.max(a,t));var _=r[0],c=-1;return e&&e.length>0&&e.forEach(function(s,e){/rgba/.test(r[e])&&(c=e+3);var i=s+(t-a)*(n[e]-s)/(l-a);v&&e!==c&&(i=Math.round(i)),_+=""+i+r[e+1]}),_},E.processColorValues=function(s){["start","end"].forEach(function(t){var a=s[t],l=h(a);if(l){if(s.isColor=!0,"hex"===l)a="\n rgb("+C.hex.rgb(a).join(",")+")\n ";else if("hsl"===l){var e=a.match(/hsla?\((.*)\)/)[1].split(/\s*,\s*/).map(function(s){return parseFloat(s)}),n=e[0],r=e[1],v=e[2],_=e[3];a="\n rgba("+C.hsl.rgb([n,r,v]).join(",")+", "+(void 0===_?1:_)+")\n "}s[t]=a}})},E.prototype.setActiveStage=function(s,t){if(void 0===t&&(t=!1),this.activeStage.id!==s){var a=this.activeStageIndex;this.activeStage.step=0;var l=p(this.stages,s)||this.stages[0],e=this.stages.findIndex(function(s){return s===l});t?(l.step=aNumber(this.activeStage.stageConfig.scrollNumber))throw new Error("\n step should be within [0, "+this.activeStage.stageConfig.scrollNumber+"], got "+s+"\n ");this.activeStage.step!==s&&(this.activeStage.step=s,this.handleStepChange())},E.prototype.getActiveStage=function(){return this.activeStage},E.prototype.getStep=function(){return this.activeStage.step},E.prototype.handleStepChange=function(s,t){var a=this;void 0===s&&(s=!0),void 0===t&&(t=!0);var l=this.activeStage.step,e=this.activeStage.stageConfig,n=this.activeStageIndex;if(l>Number(e.scrollNumber)){if(n===this.stages.length-1)return this.target.dispatchEvent(new CustomEvent("scroll-out",{detail:{direction:"bottom"}})),void(this.activeStage.step=Number(e.scrollNumber));this.setActiveStage(this.stages[n+1].id,!0)}else if(l<0){if(0===n)return this.target.dispatchEvent(new CustomEvent("scroll-out",{detail:{direction:"top"}})),void(this.activeStage.step=0);this.setActiveStage(this.stages[n-1].id,!0)}else clearTimeout(this.animatingTimeout),this.animating=!0,e.items.forEach(function(t){t.node.style.transition=s?e.transition+"ms "+e.easing:"none",t.effects.forEach(function(s){t.node.style[s.property]=a.constructor.getCurrentStyleValue(s,l)})}),t&&this.target.dispatchEvent(new CustomEvent("step-change",{detail:{activeStage:{id:this.activeStage.id,node:this.activeStage.node,config:e},current:l}})),this.animatingTimeout=setTimeout(function(s){a.animating=!1},s?Number(e.transition):0)},E.prototype.handleScroll=function(s){s.preventDefault(),this.animating||this.switching||(this.activeStage.step+=s.deltaY>0?1:-1,this.throttledHandleStepChange())},E.prototype.destroy=function(){this.removeEventListeners()},E.prototype.restore=function(){this.addEventListeners()},t.Hover=m,t.Scroll=E},function(s,t,a){s.exports=a.p+"static/guide.0a8462c.png"},function(s,t,a){s.exports=a.p+"static/component.bd3411b.png"},function(s,t,a){s.exports=a.p+"static/resource.a72b8f8.png"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAADoCAYAAACjM8mXAAASvklEQVR4nN2de7BdVX3HP+fc57nP5N6EhOTEJIBBKDRwRLAwo2BHsa21VusUZcZhaNW+FFpPrRan1GopymltsQWpijiKSot0wBGrdIpWMa3ASQEbm/AMOSQx95H7Pve89u4fa+/kcD3n3L3W+q19N/3OMEM4e/1+K19+a+211/r9vit106OHMEA/8G7gHcAuIAUcBH4A3A18H/BNDCcR3QZtzkIRcfaK/z4GnA+8D3gC+CTwVaBh08EkIK35/PnAQ/wsQStxLvAl4HHgjQb9ShR0SDoXeABYr9HmbOBbwT9narRLFKKStBG4Fxg39PNG4D9RRL/kEIWkHtQctNPS1zrgfiBraSd2RCHpE8BrhPxlgfuAjJC9WLAaSb8BXCvs83zg74VtOkUnknYBn0etgaRxNXCVA7tO0I6kAdQ8NOLQ983Adof2xdCOpFtx/yYaBm5z7EMErUh6D/CumPxfDlwRky9jrCQphxoGceKTJPxt10zSetQ81BdzH7YBfxSzTy00k3Qb9gtGU+RRi81EIiTpncDb17Af64Br1tB/R6SBXuCGte4IiqTBte5EK3SjIigJ65X1wDvzuexnJYwViiUJM4CKpF+TMNTblebUIes5//0SfZFGGnilrZFMdxdXnbWJt54+Tqa7y8bUOYVi6ULb/kgjDWyyNVKuNzhWrpHpSnPxFusvmSttDUgjDcxLGHqwNIPnw+7xQdb399iYuqJQLFmFozTSwDMShmYrdYqTC6RT8NqtozamTgF+QaJPUkgD35My9l9H5ql6PmeM9rN1uN/G1K9I9UkCadSphsgZWbneYM/ROQAuy47abEQl6oQlDfwEtfcsgr3HFpivNdic6WHnOuPv1t2FYmlMqk+2CD9LPoTQIWLd89lzVL0LLjl1xDSaUsAlEv2RQEjSj4G/kzK6b2qR+VqDTZkeTl9vHE0XSPXHFs27AB8G/lvCaHM0vXqzcTSdJ9EXCTSTVEUt5MoShvdNLbJU99ic6WHbiNHnyjkS/ZDAyp3JfQgdIdU9n4ePqWi6aLPRKnx7oViyWpVKodUe9z8Cn5Mw/vjEIlXPZ/tQH5sGtaOpi2TsTrQ9Lfl9YI+t8UrDY+/EAgAXbhoyMbHBtg8SaEdSFbXPdMTWwd6JBTwfdq3LMNKnnQ5l/fEtgU4nuC+giKraOFioNnhytkwK2L1Be+Mx0ZEU4iHUJr0VHj2mhtzuDYP0pLUWBC8JkgA+Ddxj4+TwQoVjyzX6u9LsGhvQafqSIQlUEulhG0fN0aSBzTY+pRCVpGkUUcY4ML1E1fPZMtDLeCby8ud0G59S0MmZvB/4Z1NHNc9n3/QSAOdGj6ZzCsWSbvKrOHQ7kAcqps6emFIknTM2QHe0CXwYlRK9ptAl6XksVuM/XawwEUzgp0ffa3q9qT8pmISyVdbJY5OLAPxc9Lfc22z8ScCEpAOodGMj7D9exvNhx3A/mZ5IhyKXFIqlM0z9ScB0Uvy6qcNyrcEzc8ukU+pTJQJSwAdM/UnAlKQf2jjdd1wNubPHIw+53yoUS7tsfNrAlKS9Nk6fnVmm7vlsHeiN+tHbA3ymUCy5yAReFaYklVELTCPUPJ8nZ5cBODP6HvhlwAdNfdrAZqG2YON4/4xaM2mQBPCXhWLpLTZ+TWBD0rCN44Ozy9Q8n82ZXoZ6I+8zdQF3FYqlX7bxrQtTkgbQK+n6GdQ8n2fm1JA7bVTrSLwXuKdQLL3Dxr8OTElarSgwEg7MqIOZiEuBZvQBdxaKpevjmMxNSRKpWnp+roIPvGyoj74u7a6kgD8H7i0US04zd01JukzCebne4NBChXQKdugNuWb8KvBwoVj6eYk+tYIJSd3I1b/xVLAU2DlilapzBrCnUCw5yZIzqeZ+FYLVSwfnlmHrKKeN9JPCKgdoAPhyoVi6ALWlI1ZFbhJJr5NyDjBdrrFQazDQnWYs+o5lJ1wLfBn1FhSBCUmiKTE+nFgKbDfLGWiFK4DbESpoNCHpIgnHzXhuXpG0wy6FcCWuBD4qYUiXpJ0oJQlRlObV+ee2ob6o27pR8aeAdV64LklOXrNLtQZTlTo96ZRJYkUndKGqr6wOE3Qbv8LGWSccDOalrYPi2TbnYVkaokvSy22cdcILi2rIZe3rU1rht20a65LkLF/oSEDSlsFeFzX2v4jFroUuSaeYOloNc5U6S3WP/q406+zKLlqhD3i1aWNdkpx+SJYW1LnnliGxdWAzjBNVdUlyWtl4uGnIOYDxVJEokhxP3sZpPLok1U0dRcHEUhXPh7G+bnr195dWg1HSJuiTVDN1FAV1z2eqUiMFOuk5UeGZNtQlyfgYKSqOLqr/D6cMiJNkXPyoS9JPTR1FdlBW89Im+UiaM21oknrjFBNlNe1tlCfpoGlDXZJ+YuooKqaX1XDb0N8jvfJ+2rShLkmPmzqKinKtQbnh0ZNOMayfHN8Jj5o21CXJOC9JBxNlFU3r+8VIOoxFQbYuSUeB/abOomIyIGlMLpK+bdPYZMVm5TAKjlfU5L1OjqR/smlsQpJxmnJUhCQJRdJh4N9sDJiQ9EPASJ86KmYr6shMaE66FcvPKROSPBxH01xV/Z1GerpJp6wWAjMICH+afkV+3tZxJzQ8n8V6g3QKBqJl6LZDAUWUFUxJ2gd819Z5J8xW1ZAb7jUmqQR8SqIvNvsRfyvRgXaYq1iT9CfAkkRfbEj6BvA/Ep1ohdlgXho2G27fR0nvi8CGJA+hY+RWWKyr7Z+Bbu0u+sAfIniRg+323904+p5bqqnhNqQfSV/J57LG32mtYEuSD/yZREdWIoykQT2SfOAvpPsisZF8H2oOEEU5IGmoR6uL/5HPZQ9I98WapHwuG84BxnvIrVAOhlu/3oHAlyT7EELkSCKYA+6QsBWi0lCcZ/QmbidbOZLnNtdhsY+8EnXPx/N9ulIpnZylSSn/zRAjKZ/LHgU+ImUPoBxEk8YZnBO5fukTwFuAR6SMVRpqqaNBkpMSeVGS8rlsA3gvQunBNU+RpDHcfknC70qInyXnc9kiSrrDGuHkrUHS2wrFkni2hSthguuxlO0ANXkDaCyVtuLgPhQnJOVz2Tngj23tNHxFkubG23WFYsk4OaIVXEpcfBXLSTyMpF69tOWXAR+z8bsSzkgKVuLX2dhomH/HXwO8wcZ3M5yKpeRz2e9gWfltiBSqvkTkmrQ4FGXElFA1sRH4F1T1khXiIOluhITRDXABam60Ok1wTlI+l11EXcW4Vngzluu2uAScvhWTn3b4XSxeInGR9IBJo74u9eqvWLzmmvBx4A9MGsZCUj6XnSCGLLkIuBmDa9ni1EvbF6OvdkihKirfrNMoTpK0kyxCrYCqJ3rNdxfwFTRuQoyTpCndBqG6aV2WJFCVDd8k4uXHcZKkfeR8IpIaomcMIbYRMfEjTpK0V779bkkCVVF59WoPxUmSdql2uASoySwB2uFGVqk7iZMkrY/N7nSKrlSKmuef2FdyhI2oLee2iJOkHToP9wRDreJuqDWjo65vLCQF+rValeDhRltF/s3WCmfS4XaLuCLpLDTrzcJjpOV4Igk6KPnERZL2VWQhSZV6bCS1FYaIi6RLdRv0BTtAVbdvtmac1u4H5yQF85G2EnJf/MOt7XQQRyS9CgM9ga7gGKnu9vXfjDUl6ddNGoWnto143m4As+1+iIMkIz3t8EDS8UKyGYtt++LSa6FYeiVKlO6lgLZbOa4j6TdNG4bDrR5bILWv0XVGUvBWu8K0ffBtix/fcGu7c+oyki5B7dkYIdz817xWyAZtb0l0SVJsAr4CmKJDja4TkoIb/t5uY8PztbPcbNAxD91VJL0ey8uiwn1ty6LAqPhupx9dkWQ8Ya8R/r3Tj+IkFYqlDGAtUV8zS+AywdPAE50ecBFJl2MpjQ8nN/81yyZM8M3VHnDRAytNxxDhEqBPv95NF6tmvIj2oFAsdSF0jX14amug+K6Do8D3VntIugcXo04frHFyuDmdk+4iQmK+NEliV2XENCd9LcpD0j24VMpQteHho4aboxfcfiKWfomRVCiWRlC7kCLwfFiqN0gB/d1WKY/tcHvUByUj6TVYJnCuxEItqOi2U5lohTrwxagPS5J0qaAtABaDEtNMt/h4+wYaIn6SJO0WtAXAgnnZ+2q4TedhSZJErg5qxtIJAQVRkp4EvqPTQISkQrG0HtgiYasZjiLpH9BUn5CKJCdX1oc6SqPmoi4rsYTGhB1CiiQnF43PV9Vwi3jlYhTcjYGeUpz5SdqYDyJpnVwkGYljSZG0LGTnxUbrHjXPp78rLSE9/SSGciFSJImJJqxEqKM0ZB9Nt2MoF5R4ko4HilwjdiT5WOiYSGmVHMVRTdtMqDlpdwPFXuAF08aSE7cTudfpSqCDa/eG+1ebxpIkOSmwmQ0iaUPGiiSrejtJkn4gaOsEZoI5abzPeLhNA3ts+iBJ0oOCtk5goVrH85UAnuF+94+w1E6RlAZ6CguJ+XbwfDgeLirNtHAftu2D9Ir768L2AJgK9LkNpaettTClSbpL2B4Ak8G9AWNmkWT91pXWT/oRavkviqllK31u4/VRCBcfuLdIGwxFzA1uxakhoPPmgqQ7EBLmDTETRlJvt+41HUsIyLu6UOKaAb4gabPa8JirNejWv6ZDRDbN1X7SJ4CqpMFjS0aTt8hGlCslrkMIi3NOhDfj6M1LGQnfLncmPwaUpYyFa6WNersBvQhsLbtU4iohqJ00GUzeBlea7bD17XqP+0ZgQsLQzHINz4fxPu0bKKzPA13Llc2itPqtUfd8jlfrpFMp3W+42O/mNsEdCKkbTwRvuHE9kl5n6zcOJS4f+B0E7qsM33CaF+SdhaUmblz6SY8Bf21rJ7zSbIP+fveVNn7jPJz8KPCUjYFp8zfcuwHj/d/YSMrnssvAe7D4lpqr1Gj4PqO93brVS1ngraZ+Yz3mzueyD2KxEvd8mFiukwLG9HcEPoLhZ8pa5AJ8ADhi2vjYkvokNNiAOxdDheXYScrnsscxVOmDkytvwytgPw6s1220Jlkl+Vz2HlQajDYmzb7hQmwG/ka30Vqm3rwPg1yh8J7cTQPGAu5XAW/SabBmJAX5A9frtluoNlhueAx0p8mY51J+Edge9eG1TuK6BfixbqNj4RWw5ldTj6FuNI0UjmtKUj6XrQPv1213cuVtlR9wIfDZKA+udSSFa6f7dNpMmu1StsK7gA+t9tCakxRAS9N/smz8edIKN7BK5XkiSMrnso8AD0V9frppGSBQUJFCfQVc1O6BRJAU4M6oD1YaHvO1Br3pFIO9IunLA6h6k5biM0ki6X6dh8PJe6xfLH15I6poeXTlD4khKZ/LHkTj1pwwP2DcLpdyJXahkj5exHxiSAoQec00tRxu5YqSBKpk/0W3siaNpMi7A2EkCSwDWuHDwGvDPySNpOmoD4ZJFJYLynZIo2ri+sI/JAmRExzK9Qblhkd/V5qMfNEgKKnXayF5JGldhxgOOcM0wSi4BsgkjaTNOg+H2ybr+pxEEsCpwFuSRpKWkuB0kAG33jzHOwrelBiSgmsQX67TJqw70TzR1cXFiSEJpYetFRLHwzRBtyRtSxJJOd0Gc5WwstIpSe4VnDRwnm6DmuezVPfoSadcqFCEWEoSSdqRBCcn72F30bSQCJIKxVKKDhr9nRCWeo32OfurJIMklLKpkQ7c8RPaAf/PIwmLlL1w8nZI0nRSSNpp2nC+JlLI3AlTSSFph2nDhUCFYtgdSUeSQlLk09SVCDWWRtwtAQ4lhSTjhPRqw6Pq+fTJqFC0wv6kkDRm0zhUxxl0E02PJYUkK2mh+aoacg5W3c8BzyWFpEGbxuVAk9KB9tu9kJydSasQWAxUBAflpRbvguSQpHVj10os1dVw65cVE95LILqQFJKsEArkCWu/fSr8lzUnKbhPwArlIJIyckuAp1G3wwMJICmfy1rXnCwHN8AIDrcbUKqmQAJICmBVUHxSu1vk7fYcKwSpkkLSgk3jUJZaSOD8RlZUVCWFJKtICu/JFYikQ7Qo108KSVYqEFUviKS09V/nJlqU6ieFJONaE1AX5R1ZqjKxXLNJD5ykjQ6l07MYDeyjKdXFBHf+7zHbPtxKG/kQa5IKxZKtCYBHJIxYoAzc3O7HpAw3LelnB/gCHebFpJBUwpFwXgTUgEKnB5JCEsBn1sjvrcCznR5IEklfw5FWZQc8iyo77YgkkdQAfg8BUaiIWEJdHLqqHG2SSAJ1r9FfxeBnEVXdHUleMWkkgQr/Oxzan0bdZPjtqA2SSJIPXI36RJAeeg8A56Mp85pEkkCR80FUrayECuoRlMrE5cDzuo2TSlKI+4FXoKorD2i29VBrr/cCpwGfwzAyUzc92vZK6qQhBVyAioYLUfkD46jT3xTqLtsXUDKuD6EIFvlm+j9JBs9yxSps9gAAAABJRU5ErkJggg=="},function(s,t,a){s.exports=a.p+"static/web.61b1f33.png"},function(s,t,a){s.exports=a.p+"static/plant-1.a9e9851.png"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACzCAYAAABrYOVnAAAZUElEQVR4nO2deXycVbnHv+9s2WaSWTLZ0zZtgTa1pYWygyLggiBVwAWLC1oBFZd7ld6LIli3661e0bv4UayscsUFsd6LXrygAhfQVmiBtpQuIc2eSTKZJJNttvf+cZJp9sxM3m3eme/nM582M++855nML8855znPeY4kyzLZytYPf1JvE2biBK4BrgAagTpAAlqB54BfAE8CGf3SH7r/B8pYqQE2vQ0wCW7gC8AnAO8cr6+beHwcOADcCvyPZtbpgEVvA7IcG/BJ4CjwJeYW1UzeAPweeBBwqWeavuSFlTkXAS8A/wGUZ/D+64G/AKuUNMoo5IWVPjXAA8BTwIYl3qsReBY4falGGY28sFJnLXAXcAz4IGJQrgSVwP8CqxW6nyHI9cG7ByieeJQixjwFE/8vRnin1cDZiLGRWviBR4DNQFTFdjQjV4S1FngzsGni/ysQnsJIn38DYtaYPTGFBTDSL1ZpnIgZ2w3AGp1tSZVPkReWodkKfBuo1tuQNGlE/BEc1tuQpWLGwft3gJ+SfaKa5CK9DVACswnrduDzehuxRNbrbYASmElY64Gv6G2EAtTqbYASmElYXwOsehuhAH69DVACswirArhSbyMUQqnAq66YRVhvxRzeCiChtwFKYBZhbdbbAAUZ0NsAJTCLsFbqbYCC9OptgBKYRVg+vQ1QkE69DVACswjLTAlzx/U2QAnMIiwzcURvA5TALGuFMb0NKC60c+7GGlYvd2OzWjh6op/n93UQHomkcxsZeFklEzXFLMIa1rPxM9dVsnVLI85iR/K5jY0VXP6mBh78zSH2HepO9VZHgEE1bNSafFe4BKxWife+Yw03vn/jNFFN4ix2cPN1G7nwzLpUb/msogbqiFk8VlzrBpfXlPKBq9bSUOde8DpJguu3NNI/OMbBo4tGEp5TzECdMYuwwlo0IkkSpzV4uficZWxqrEBKcfHFYpG44Zr13Pn9/2N4dMHM42eUsNMImEVYqoxLrBaJcm8xK2rLOK3BQ+PqcrzuwozuVep08J7L13Dfr1+Z75IWTDIjBPMIKzTzCbergFXLPHjKCnGWOLAs4F3sdisOmwVJkigusuEsdlDqdOD3FmG1KjcMPW9TDU/vbaWpdZa5AI8p1pABMIuwpg1ern37abzlguVIqfZVGiFJsOXSU7jrvr1zvfx7re1RE7PMCpPLIBdtruOtF64wnKgmWbvay+rlnplPh4EndDBHNcwirGYAq0VKXHWp8fd9vu3ChplPPQaM6mCKaphFWEcATm3wtpe5CvS2ZVE2rCnHN30S8Eu9bFELswjrONDXUFfWobchqSBJEudtSqa2hzDZwB3MIyyA35Z7inr0NiJVzttYMxkH+yUwpq81ypO1s8Lh1t3c/fW3JX++8fbHv13gsG3X0aS08PuK8ZYVtveFxu6Z+jkmufH2x3WwSjmyVlhTsAKfvfvrb7sJmDUqNjLf/PwbqyRJuh/4EfB9dFiaUotsF5YEPAxcq7chmSBJkhU4FfgX4DzgvWRYn9RoSNla3Ha4dTfAR4B79bVEUT4C3A9QUr9FX0uWSLYP3j+mtwEK83G9DVCKbBfWJr0NUBjTfJ5sF1Yeg5LtwtqvtwEKs09vA5Qi24W1S28DFMY0nyfbhXU/8Cu9jVCIXzExIzQD2S4sGXg/otjaESAy8e+X0ChdOQNCwG1Mt/fziM+RnbGfOcj2ACmIaPV3Jx5TKQOMuMTzb8C3Jh6mJds91kLchfFynMLAv+pthBZkbeR9JhOR+Jl8FfiyxqYsxJeAb858Mtuj7HNhZo8Fortp0duICY4i1gRzArMLawSx7KO3W5aBm4Fxne3QDLMLC8Qmhe/obMO3gT/qbIOm5IKwQNR/1+uL/S3wRZ3a1o1cEVYEuBqYdxuySuwHrsNECXypkivCAlE09hLgRY3a2wNcihjn5Ry5JCwQO6YvAdROKH8MuAwIqtyOYck1YYHwXFcgTrJQuouKAXcAVwFDCt87q8hFYYEQ1B2Ik1P3KHTP5xD15r+GSQ4BWApmWCvMmB17txyzWxK3XFZ/4JrT3N3vK3OMrEj3Hi1hX+LZrtXDR/urqmS4B+gCAkATYoH5AHDozrN26x1L0xSzL+kk2bF3iwU4AzGgPh9xWti07WKrSjvYuuIJJGsBWB0gzeHQ5QTEIxAf48hABT87cXkq5gUR1WTuvfOs3U/OfNGMSzqm91g79m6xAp8APgesWujapsEa4mNDWKWJ+lWSFUmyIEsSkiwjywmQpwzL4guXiZyCF3Hq69Yde7c8dOdZu69P+4NkGboLa/uvlbnPnWfN+9ItwPdSuYcMjMQLcNkmIgRyHHlCSHP5dbc9o0KCW3fs3XLrnWftTpZeUup3ALDzauXutRR0F5ZS7Ng7b3eS1nFzY4lCXCmGnrz2QSQyWoiUF7DXFOTCrLAtnYvjcuoF26xSHJc97UTVbsTg3tSYxmMtwBeBtcA5811gt0JFKXhLwFeQXqD8LauCvD7qJDgMfWEYWrxuzIOIP2hThyTMLqxiRDB0VnV/iwSn18Pm5dDgA5sFEpFBRo6ml3R6RkUv55QvS/7cNwyHu+GFFmibO+7+BeBDCIHdjYkqJU/FrF2hE/gHRAnJHzPHDuMPnw/XbYZT/EJUAONdT6fdUHxsekkuXwlcsBI+czG8a/59zRWIDRSvAo/MZV+2YzZhScAHEV7gW8xzcLffBWsrpz8nR4eIDzWl3WBifP7lwPMbRFsLYEFkXbwA/CdQnbYBBsVMwlqOSOp7gEW+oLpZRYtBsjuxFHjTbtRedtqCr9endksJkV5zCPho2kYYELMI62rEcWyXpHJxadFcz0oU1l2OZLGn3Ki1uBq7b+OC13iKU74dgBv4CcJ7laT1ToOR7cKSgG8gdhGXpvqmgnmmLJZCH0UN12JxlC16D0uhn8Jl75x72SeFthbhOuApsrhrzGZhWYH7EOGEtE4LWOjLthT6KVq1FUfFeUi22e5Gsjiwl59JUcN7kKyLn6tjs6Zj2TTOBP4MpHwmnZHI1nCDFXgIeF8mb44sch6rZLHh8J+Fo3wz8dFuEmM9gIzFUYaluBrJMvtswvkYX/Cwr0U5FfgTYtE8aypCQ3YKS0KMQzISFUA01dCkJGEtrsJaXJVpU4wt/VDh1cCjiPFjWucA60k2doW3AR9eyg1iGm5tiCrT1gXAPylyJ43INmG9HZGhuSTSO/97aSx87mVa/B0ijz4ryCZhVSHqRy3ZZi2FNahcWRIJUZgtvQCGTmSTsH6IWApZMoMaHjASUnbz13KMWZppFtkirKsBxRKYhjWsoKCgx5rkVqBy0at0JhuEVYjCtRfCGnms0ahig/epFCMyJAxNNgjrMyh8Rk40DmENvFaPesUqb0ZULDQsRheWC+H6FSeowcZ3FYXlROR0GRajC+smoFyNG/drIKyAunuht6l69yViZGHZgE+rdXMtPFavunWbNwCnq9rCEjCysN4NLFv0qgwJDqt155P0qF+94RrVW8gQIwtLVVevsjchIUOv+sJ6l+otZIhmi9AHDhyY8/kPnTr7uQeOvKEelZcv+lQWVmAIYurvw1kP1F1btye5xW3PPCVOzj77bNWNmYre2Q0OYCUzsiVXlA58YCBSoKo3lRIQHpaxqtRKVz94CtNKExPIkJBTV6THPnwD8LuJH0cQxUh0L6KrWVGQGR6rFtiBSH1xamJAFiDLMmNjYyzxOxlBpNncjtilBGjvsfQYY21GlGv8GHlRJZFlmfHx8aWKCkRkfividzzvJl210VpYpcBvUGgx2UxEIhESCUUHZR5g98S/mqO1sG5BdIN5phCNRonHVck+rETkcWmO1sIy7PRYL2KxGNGoctmAc6BLYSOthaXoYnK2k0gkiERUzzpcrXYDc6G1sFLfDWpyJgfrGlCgRSMzMXLk3bQoOAM0LHlh6YAKM0DDkReWxqg4AzQUeWFpiAYzQMOQF5ZGxONxLWaAhiEvLA3QKKxgKPLCUhlZlolEIqaeAc5FXlgqkwszwLnIC0tFIpFITswA50LvRL+soKysDL9f1Mnt6elhYGBg0ffEYjFisaXXMMpW8sJagKKiIioqKnC5TpY+rq+vx+12EwgEGB2de/98rs0A5yIvrDmw2+1UVFTgdruRpJPpxbIsI0kSLpcLp9NJKBQiEAhMi03l4gxwLvLCmoLFYsHj8eD3+7HZTv5qhoaGCATE8Td+v5/S0lIkScLj8eByuQgEAoRCIeLxuOnXAFMlL6wJysrKqKiooKDgZDLA6Ogo3d3dhMMnt/S0tLTgdDqprKykqKgIm81GTU0NPp+P9vb2ebvHXCPnhVVUVJT0QpNEo1F6e3sJBoNzep9wOMzw8DBer5fy8nLsdjsFBQWsXLkSj8dDR0cHw8Ma7Ig1MDktrKqqKnw+X3IclUgkCAaD9PT0LBomkGWZvr4+QqEQXq8Xr9eL3W7H4/Hgdrvp7OykrS2tE+1MRU7HsbxeL5IkIcsyoVCIpqYmurq60oo9RSIR2trapnWXkiRRUZHb+0Vy2mNNdnPhcDgj75JIJHC5XNTV1eFwOGa9lsvktLAmyUQERUVF+Hw+3O6TB45PLt8UFi5+YoXZyQsrTaxWK36/f9rYDKC3t5e2tjZqamooLCyc9loukhdWGpSVlVFZWTmt2wuHw7S3tyeXeSyWnB62JskLK0WsVis1NTVYreLUpVgsRkdHB93d3cmxmsPhwOnMVw2AvLBSRpKkpKh6enro6OhIbt+SJInKykqqqqpmDeJzlbywUkSWZQYHB+no6GBwcDD5vMvlYtmyZZSUZPW5lYqTF1YKyLLM8PAwhw8fTj5XWFiYXMqZGmCNxWJ5r0VeWAALLhpPbi6dDElMBj9ra2tnLVS3tLTg9/tzPjgKeWEtytTUYpfLRX19/bQBeiQSob29nd7eXmRZzotqgrywIDkon8nUzaUWi4WVK1cmsx9kWaanp4f29vZp+Vh2e748BeS4sCbHRk6nk7q6Onp6epIzvZmbS61Wa3LsNDg4OGt9sKCggOrqasrKyqbdO1fJaWH19/cnF6LdbjelpaX09vYSCARmZYFKksT4+DhdXV3JpD8QnqyyspLq6uppY65gMKjZ5zAiOS2szs5OQqFQMq/dYrFQUVFBaWkpnZ2d9PScPN87Fotx8ODBaZkPPp+PmpoaioqKks8NDQ3R3t4+LSSRi+S0sEBkiZ44cQK3201FRQUOh4PCwkIaGhooLy+ntbWVcDg8baG6pKSE+vr6acmBkUiEjo6Oad4sl8l5YU0SCoXo7e1NeiGr1YrL5WLt2rUEg0E6OjqQZXlW7Coej9PZ2UkgEMjp7V4zyQtrgkgkQiwWo7Ozk/7+fmpra5MC8vl8eDyi+PDUReZgMJjPc5+HvLCYvbl0bGyM48eP093dTV1dHaWlpdMENTQ0RFtbG0ND6h+Wk61ofTJFCIOdDDq5ZWsh/H4/VVVVAHR1dSWDodnCg4/u0zz2kdMeK9XNpT09PdNmiHkWx/bp236kWWM3bb1As7YWIxcKzE6hEqhGnFIRAYaBDkC1KWzOeiyz1qwaj8TpCYbp7R8hGBqhV5xR3DXP5YPAq8BfgD8CTyAOeVoyWgrLMx6JSQUO/bVstvJC/QOjtHYO0N41SF9oJJ0/mFLEQU7nAJ8FRoHHgfsQR9VlXDBVuuUff5jpe+djHXABcC7QCJwCeKdeUFzkoNRZiNddjNddTJW/FK+7WJP1tVgsZoqiHeHhcZpa+2lqDTIUVuUggk7g34EfAX3pvlkpYZ0LvB+4igyPNbHbrdRUlrGsxsPyWi8lxcony6UyAzQy0ViC11uDNLUE6dHiUGvBEHDXxCOU6puWIqxi4CPAzYgjZBWlstzFymXlrF5RTnHR0kWWSCSydrAeGhzjyOs9HG8JEtPgPOB5CAC3IbrJRY3IRFhO4O+BTwPl6b45XSRJoqayjMZTKlle58WawfYqhU4u1RRZhrauAV49FqBb7ZPR0+NJ4AagdaGL0hlJ24BPAHeggaAmkWWZ9q4Q7V0hCgvsrFldybpTqnCWpH72UDZ5qnhC5vXWIAePdDOozthpqVwKvITQws/nuyhVYV0A/ADYsHS7MmdsPMr+g228dKidhnofGxtr8fsW3seXLVWLo7EER17v5dVjAUbHDH96hQd4GHgL8ElEbGwaiwmrAPgq8AUMVJlGlmWaWnppaumltsrN6Y211Fe7Z10XjUYNn3EQjSV4ramHQ8cCjI8b29Y5+Bhi1r+FGQP7hYTVAPwSOFM9u5bOZDdZ7inhzA3LWFEnIhvxeNzQ59bE4glea+rl4NHubBTUVN6IGHe9lSlhifmEdQlCVN55Xjccvf3DPP7Uq/h9Ts5cX4/fY8yKLwlZ5lhzHy8f7sqGLi9VzgAeQ+hmBMB69oVXzrzoWuDXiNlf1jEyGuFYcy+dgSGczgKcKsTDMuVEe4in/vo6TfqGDdSiDlgJPAKzhfVuxKDMON9GhoyMRmlqCdI/OIbPU4yeS0k9wWGe2dPMq8cCRCLmWUqag/VAE/Dy1N/2OcDPMNm5za0dIdq7Blizys/606pw2OfeQ6gG4eFx9h3qpLmtX7M2DcBO4NFJj+UB/kQWjanSQZaF1zjW3IfNZsXrLlJ1XTIaS7D/UAfPvnCC/oGcS1t2As2THmsnoo80NeORGHteauW1ph7OPr2OKr9r8TelSXNbP3870M7oqGkG5plwqfXsC69cBtyLgeJUajMeiSXHX+WeYhwKjL8GhsZ4Zm8zh44GzDgwT5dCG/AhcjThr7UjREf3IOvXVLFudQUWS/rdYzSW4OXDXRw+HiCRyI5lIw2otGHwAKjaxOMJ9h/soLm1n3M31eP3pl5A7UR7iL+90s7IaPbndymMZCOHusCFCA2O8vjTRzi1oZyNjTULzh7DIxH+sq+FzkB++9c8tNpQMaE+25BleK2pl6b2MMtOa8RTUTXjdZlAazPtx4+QMFFqswo8bwP2Atv0tsRIRMfHOP7yi1jcy3EsfyOSo5jESJBI81PIw/m/wxR4xAb8FyK32VSBUSVIhE4wNvRzJFc18kAryDk/20uF14DHLYik+Yd1Nsa4xCPIoRN5UaXOdiA+OXC/DbHHLE+epXAf8Fs4OSNsB27Sy5o8puCvwKcmf5gaangY+LLm5uQxA/uAK5iyi3pmDOvrwFc0NChPGlgsUGA3XNHc3wMXM2NT61xLOTuANsRM0ZhpmDmEq1hiQ4OddcttrKi0YLPCQ38c46Um3dOZY8A/A3cCs4J6860R/gTYD/wUWKOaaXnmxGKBtfU2zllj59Q6KzOXMEtLdF8seQWxkWLvfBcstPj8AiKX+avA5xa5No8C1PgsnHmKnU2rbDiL5u/ygkO6hT5GESlW32SOLV9TWUwso8CtwP2IvfuXKWFdnpP43RbesNzGptU2qjyLe6JYApo6NV9OiiB6sW8gIgiLkqoXOoDYnHgZ8DVEEZA8M7DbJCwSjEfnT5/xuCzUl1tYXmmlcZkVX2l63drB5jij45ql54wDDyG+8+Z03phu9/bExOPNiE2sbyefHZHk5isKqfdbGY/K9A7KDA7LROLgsEJJIfhKLZQUZj6rSyTgyf2abLtvQZQv2kWGSQqZjpv+NPFYiag281HAl+G9TIEkQeVEV1Zgl6j1SdQq/Bt55mCUrqBq46sI8AfgHkT0fEn97VK9TRNibagOuB6xaTEnk729LgsOm3oxppZAnMdfUNxbxRG7mLchapS+E3iUJYoKlJvpjSH64ocQO32uAa5DbL/Wbr+VjlR51RsRdIcS3PuHMRQqQzGCGM78NyKzZb76pEtCjRBCEPjxxMOL2NN/5cS/fhXaMwTVKczoMuGV5ji/eGpswQnBIkQRoaOnEfVFn0M4AlVROzYVRKxBPozods9B1Fe6CDifLN3GPxfVXmUdc1tvnKdeifLS8bTd1CCwB3hm4vFXFKqEnA5aBj0TwPMTj8m2z0B0l+cBZwH1GtqjGKfU2li3PHNhyTI0dcU5EUjQFUzQ2hOnbzClQXofYgH4RYRX2gccA3TfLqRnND2G+MvaM+W5CmAzYufQGYhaAA0YNKRRYJd40wYHbz7dTgYVLAFo7o7zm+fG6eibV0hjiBjS68DhicerwKGd25x923cZqoxkEqMt0wQQ9cV/N+W5EsR65RpgjbNIOsNmldaNR+Xq0XFZj+IlcSCyabW94N3nOyyFjsxngvub4iMP/3n0eCJBO+KzBxAZve2IWFLzzm3OTiWM1hqjCWsuhhFu/gWA8KjMpKf/+DuKT7VI8reiMd4VHpWlgRGZ8KjM4EiCkTGZ0YjMWISJf2XSKEM6gPiSu4ATiC/5AGLx9TAQu+7igjJZ5nlgbYaf656NK603blzpNOV2HzUOENCcnduc1wAPIEqEz0s0DrGYzMCIfON3HxnZzcnJw2Q5mBiirnmq7foRAcVZRcYW4TuI+N+Sx0JG7QoNOXZJl+27wo8gvtwFZz92KxQVSL+q8lgmlyqaJh79E4+0dqBu3xXu2b4r/E7EBORuFl9PexG4HLGwr/sAW01M4bEm2bnN+SZE0G+uMjIRhKe4Y/uusGrdz4QXW4+Y4foQXrAb0ZUfU7o9o3osUwkLYOc2ZyPwPcRCeS/iy/wD8OD2XeFmjWzQohnAuML6f3bWDRMt4vpGAAAAAElFTkSuQmCC"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAABbCAYAAACVp/ucAAAbGUlEQVR4nO2deZgcZZnAf1XVPVfmyjkZJgkJwRxcOQwJQSAQIAMoiKARgyDKGlHEdVnXx5VIXBjwfFhdRdfRICSLKKIiohLuHBCOAOEKgSQEkkw6IZNjzp7p7qraP96eZDLTR1VXVVfPpH7P08/0dFd939fXW+/3nsqiq79MwGHuvecXKR9/4+obe+6eBPwd2ANcBDRnGu+k5Xe4uLqAAG9R/V7AAORXwDjgVOBHPq8lIMBVAoFgj2nA6b3+/xxwhk9rCQhwnUAg2OOsPv8rwM+BkA9rCQhwnUAg2OM1wOzz2DTgeh/WEhDgOoFAsMcqYFmKx28BavO8loAA1wkEgn2+Aezs81gl8GMf1hIQ4CrB3jcDB95K6YJsARYD/+jz+GeA3wBPZRtj6NSvuLPAgACXUXKMQygDzgHmAtOBYUA10In45bci++1VwCZXVponGhvqLR237aZVvwWu6fPwRmD6hNvmxV1eFkPGftztIQMC+mFXQxgPfAu4Eii3eM524H5gOfC6zfkKmRuBBcAxvR47Afg34Ie+rCggwCFWbQgh4L+At4EvYV0YgATxfAPRGJ5GhMqAZ8Jt8w4A1x16QIGicdWUzay9JX6gawnwWSRGYbhPSwwIsI0VDaEG+AMwz4X55imKssY0zWnAfhfG85UJt83727abVv0euGLYZVOomlkDUAzc2ufQZ4FLgH15XmJAgC2yaQh1wBrcEQYAmKY5ZtqUUc82NtRPcmtMn7lBqyjeXzWjJtMxpwN352c5AQG5k0kgDEUs5h9ye9KNW5onx2L6m40N9T9tbKi3s/0oOCbcNq+5cn7NyyhZD/0YcK73KwoIyJ10AkED7sMDYQAQTxhs3X4wBHwNeLGxod6TefJF+UnlVRYP/aanCwkIcEg6gXAjYM3/liN79nX23J0CPNvYUH+al/N5iWkmhlo89DzgOC/XEhDghFQCYSLiUfCUto5Y739HAI80NtTP9npeLzBNw8TUrRyqAl/0eDkBATmTSiDcAZR6PrHab9NdBfy5saF+IOYE7Df1WPajhM8TRIgGFCh9BcJsxD3mOUNKw6kergPuaWyoz26iKyy26PHO7EcJNcBHPVxLQEDO9BUI/56viUcMTauEnM/AM769auhdmIbliOVrvVxMQECu9BYIdcBl+Zp4bG1Fpqdva2yo/2y+1uIC6wD07harx19IkC4dUID0FgjXkKe97dDKEqoqijMdogHLGxvqb2lsqB8IKdpjAAy9Gz3WZuX4EHCVpysKCMiB3gJgYb4mnTLRUni/AnwHmN3YUL9o8ZKVhRzqfHXPHT3WiqqGUEJZ7bLXUOBJUK3v/K/fSxiUVE66LvtBPtFz9Z0EnJKvSU+ZPNLO4fXAC40N9Sd6tBxHxNqbahC7xyHiXfsx4h3ZTp0KDNjYi4DBSY9AOD/jUS5SFNY4adIIu6dNBNY1NtRf6MGSnLKIFFutRPdBK+d+wfXVBAQ4oEcgzM/XhNOnjqK4SMvl1ArgwQKMaLwy7TNm33qs/fgUkh0ZEFAQ9AiEufma8CMz65ycXoSUKSsIYu1NU4APpz8iq0CoRoqsBAQUBCri/sqLC2zU8DKmTBzmdJjJjQ31ZW6sxwWyuEazCgQQLSEgoCBQyaMxsf6MCSiK4yDE7yxestJyWKBXxNqbFKSwalqy7xgAiQwNtg25Mwa4CXgGOADsAr6HuK4DbBLCoxTnvlSWF3PadMeKyJOLl6z8vhvrcYFTyZq5aGDhe1mFFKB51I1FeYFWWngxVHo0Mg64DbiCI4261UjdzxOAT2qlta4XvHVKx46/+r2EtKjkKR13/mnjCIcdC+133ViLSyzKeoRFFQEpnhJgAT0aqdSjkR8Dm5EtW7pgukso8DiPQkRFQpY9paRI45zTxrox1PFuDOKUWHuTiqW9v2WBENRYt4AejVwCvInk3BRZOOXrejTySW9XNbhQyUNV4DNnjaW0JGV2o10muzGIC5zNkeXXU2MaVscbB5yc+3IGN3o0MlSPRu4D/koyTNwGv9SjEduBL0crKlKcxFPmzbb7GaaltkA8DJY8A6Z1gQBwUW5LGdzo0chZwAbEVpALI4CfuLeiwU0Ij/s7jhxWxqgRQ9wccjjSIcoXYu1NGvAJK8ea1m0IIOXVfpDLmgYjejSiATcjHgSHxiflSjPR8YISGlKM9AWpBHYDfwRecDb24CKEvDmuM/eUUSyYewy1I8pQ4p2gaKCFMRXH8idj3nQeOAspcmIB8wBSvdoKHwFKgK6cVjWISKr4v8NBSL2iqKCVomolKGoYE+WnKQ67EbgdKRmYyHWuwYSKDcuXVc6eVcu1l36IsTVDCGkKimmgGHGUeCeK9SIi6fD7B2PHSPWWjWNLEaFwVKNHI7OAl8hJGCgoWila8XDUkhrUcCWoRZjpa+SrwBJgJdKf9KhHBSwl8NvhgtPT29uURDeKYakgaTqyphF6RdK7YGm7kOQ5m1Mc1X0b9GjkKqQx0Dg75ylKCDVciVYyCrWoGlQrDogjmI9sHU6we+JgI4QH+/HyssweBcWIYao51XGNA3tzOdEl5mIjzFtVQ08gaqlVzkz3RHTrvTaGcYewltydxdoBMIq86amTtBfcjs3SeYpahBoqB82VQM+JSMu9hRRwkJjXqHjQY3FbUxalw7Blfe/NpsVLVuZ8sgvYCSB6VwmVvmRz/FMRO8JRgx6NlAMPYkMYyLZgBGrxcLeEQQ9VwN85ikvlq8AOtwd9ePVOjAwWdjP3fIbncz3RJS61cew/EG3GjtGkGJhpa0UDGD0a6ekdaknQKloZWsnI5LbAlbiWVISARsTjM9CqfztGBba7Pejb77ew/G9b0Y3UQqErkbOn4c85L8ohsfamiUiXKav8CUlm2GVzqkKr9+AJejQyDbGxTM92rBoqS9oHqkDJW0uLbyKejqMq8SwEvO/FwGs37GHrzjYu/Egdk46tpLK8iD37ojz23C7Wvba3q66m/MUzZ43ddtapYwxNU2qRCLQaoJwj1ebdSGDKXYuXrPynF2u1iB3tYC9y5QPJvzjWxrkZ6isMDvRo5DxEuGd0IStaKWq4QlzW/nAFEpF6KZJJOegJIT82T4g0d3LXXzeneqpk5+62M+97eOOZ9z28MYIYcf6I/IjeSVZaHrJ4yUrXPSAOsOMBeLCovK7HlbIZOMfGuYN6y6BHI58GlpMhF0HRSlBDFaAWRIOrs5DU6gvx6OJZSIQQX3kn4FdIcC3wueQN4ODiJSvfRpJYNiFbml3AHqAJH9yOsfamMBk8ACl4oNf9jTanm4R8Fkd4fx7hsC3VBFI1joul2PHGMPsFmiToH3yiA313eIZy5LlfyrRqC+jRyA1IGHHKPaOiFotG4J19IFemIr03LsLDC2ghEEK+CxuA031eSw/VwJzkLRVtiGB4B3gd0SrW4G0486nIVsYKTcCTvf5/3eZcKvIFPMJDsVnJg3PFIxOaHo0owK1IGHL/adXwoSCiAqYWWA1cDjzm81o8o0cne4rCEQjZqECMe1M43IeyE3EX/YzDe3c3OdvGscuLyut6h8G+hBgX7VhS+wmEQmDFMvvlHxctukcDfkWK9nWKoolGoHneW9gtKpDv2b8g255BR8+X9B++rsI5ZUgG4mrkh3SBy+PPsnicCdzV57EW7G8b8lLFymsWLbqnGDEeHiEMFEVNRhaOHEjCoIcwcDdptJ2BTo+G8BywE/u55oXITOCfwArgehyEZt8ZP6gAk2dp4dlRE7oVhRBQhskoQ6fONPpe9lcVlddtSTHUSuAkG1NPyHXNBUARULNo0T37kPoF5/V+Ug2VoYQqQFHdT6LJHwrQgPxevopsuwcFPQLBAH6NZH0NFq5Cio7UAx9YPenO+MFSxHh0SfLviPWh1HtbzRTBMEOPUye1D36ZZti/Ya+z9kAUzGOB/0Te9/K1a+ftmTt3bY2myW9F0UqSLsSC8By4xXWIW/Iz+JiS7ya9P51fI2pQQVt2bDIdeByxj7RnOnDa0jkzkb3hIiSENSu6ohDRQkS0EOWm0d2pqNEvpz50NWIEnWRx3aMsHlcIVCMGw8X0+u5s3z6+Jhot5eyzV1MypMTtEONC4hLEiHwx/ubZuEJvjTcC5D+DxntOBn6e6olpS+cMm7Z0zlenLZ2zHrE9fBmLwqAv7YpabMBDd8YPrrkzfrCvi9JErp5W8bvmgxVU5P3ajKjN/S4ke/fW8PjjF9DVPRBejiPmILEKE/1eiFOURVcfcU0bDbyNR0VTfMQEzgCeveTmueH3FeN8pPuylz0RVgJLrg9XdyEGz8sBqw1rW5Ar7yHujFvqFekplcsPNQg/C4knmGHlvOrqdhZ8dD3FJamiJ/KHmehEUcNexjl8gORlvOjVBF7Td0O3G/gucEf+l+IpyujhpT+df/2MLW8q+gX0+bG5TbmicaxSVH+iGq7PdQhXF+Qe44DvIyG9lqMWDh4s5/FHZrLgovWEi/wpTGQmOjDirSihclTvBMIoxIX/acQ9OeBIZeH5CWIZHlRFP/e2dM96LR6fpRV5U0KyXNGYoBRxglrECOfdqaJurMktKpcvHAr8B/B1pLKTbfbvq0wKhZfQQvk1yhvxNsxE0oSkd0JoCDgv5ZeOIYh35ToKqA+pVVIJBBNRcR9lEJX00hMG7bs7qBrnzn5WAarVEBMoYooWZqi7YX4ZDaD5onL5wuHADcC/4oJW1by3mnVrT+CMs+0Gb+aMacZbFDPR2esBAyPeKinU3qEhRvqxiMY9YDys6XxAnUhX4l+RtaHpwKHrQLcjgaChMFINc5wSZooaotS7dPltXg1shcrlC09BrnBXI1c819i2tZaqqk5OnrHVzWFTEUXvutlIdP6o7xOmHsVMhFFCrr60VNyMCIUvYa8uhm9kcgp3Ij7lhxAr/UByhaVEj9lXVYtRGa2GOV4Jc7yqEcpPzYz1Ho5diXxBv4hcuS6qXL7wPSTtegFSRHaah/Oz4eWJVFZ3cOyE3V5N0QxcjFbyHGLM7Vdjwoi3oiUrM3vM55E8iE9RIJpfJqxEifwRWIVoC3ZqAhQcoeIQoVAIRVXRNO3Q365olERcBLiKQrUaYiwhJqlhRnm310zL/yXaF7aYieGIK2sNkvnpKLvJfPKMT8Vq9t5VNHlrsRJKHLKqxQ9UvWoqpqKYSl6zXdetncrw4W2UV7qevLoFSVXuiRj9b+APqQ7UYwdRwyZKyPOXfgESi/Ix7BfMySt93Y4Zj0WMSj9A4rkHHCfcMJthE/rvHU3DZERnNxMJM1HVCPtYOetlI846vd+PpA0RCq8h2ZNvI6Hm75M+Qm4k0vrudOB8TOVcFDPlC9NXz2Xoe6703rTF8BEtXHDxC6iqa1vs55AAoeaeB/RoJARsJUMlZyU0RLItvWc78FHgjXxMlgt24khNRNq+iZQHK1TXWEoUVaFidOolK6pCWXEpU3ze5e0wdZ7XU/6+KxC1N1V5tVZEKPScWIZ8Nke+WCX9j8446S3wQSDsa67ijQ3HccpMV+wJvwe+QB8PjVZam0h2i/6fdCeaiQ4MI45aNNRL7wOIUFqLbGOe8HKiXMnl1T+KuCVbXF6Lp5SMrSRcml7+7Qib7Fb90wzeNXX+nmjHsG+QrkQCyo5L3kZjU1iHhx2kbZQ/UbevvzqB1oOOri0mYrxbRHp37W/ppTWkHMSIYXTvBb3byVqsUIUk313j9US5kKs4fB6xQA8Yhk8fnfWYteEcfo4usE6P8UiiDd1H71TXcf5UBzMMleeftVO79gjaESPorWRw7Wmlte3AD7MNZpoGemw/ZrwFBXuNOW0SRoTU7RRYZWcn+tFDDJDcByWsUvvh7P1VOjV4KY/JeK0Y3K938LLR6bujOjx+J6bqT8uL3ZFh7Nxu24m1GdlCWa3EfSdShi8rRqITvWuvgpnwuuz/fyKVnQumF4fTDdPtrqzCY4bNrqO43FoS51thkzbnkYYZMRCt4HfxNvY673XpCmpRjLbRlrPEXWfD+omYqW2eqXgYmI3YsyyhldZ2YuP7apo6etfeg4iHIGWlYJe4AsmWLAi3vlOBsBGx4BYsapHGhPOOs3y8qcCqIu+u1xuNBHcn2njZ6PR1i5CK7mMivs194EAFu3aOyHZYAvgWkpSWS7ZXI/b6kJyvRyObkOI215PFDuGAuYiH5BSPxreMGyZVL6WnY2rmT6Ckyl5C437N5B2XWwFsMhIsT7TzlN5O1CzMAjtanSWN2jM2vZnR09EEzF+xbMEPyDEUWCut7cJeGrqKVAOPAb9AStt9D29yTSYgcSeXeTC2ZdwQCH63Z09LyTEVTDh3fE7nri8yU5Y1t4MBbDDi3J1o4wm9nTbTn0w/q4SqWomV+ZdXFdk1jGhnSuH9IDB9xbIFbhTQvQ976clXJ6tGg2gl30YK/P4G98ORy5ES/t/FJ2OjGwJhqAtjuI5apDHpypNQtdxeYkKBNaHcVPp2TJ7Wu1kWb+UZvYOOAtUIUtExyiutODumqbLj/SO20h3A4hXLFnxixbIFrixMK601sdeReyJSS6M325HQ78lIUV03Jb0CLEUEQ95jfdwQCNY36Hlk3CemUFnrLLOxKYzl2AQT2RY8oHewPN7Cm0aUmLNoY19IDN/n6/yRpmE9d1cDM1YsW/Brt+fQSmvXAvfbOOWqNI9vQypKT0bciG5qDJchW4i8Ftx1KhCqkGyugqL6w7WMmVPnylhPhzOb/vaaBk/oXSyLt/KE3s4eI15gpkJ7KMP9bWHY3FxlICXZzlmxbIGX9qkbsZ5stFCPRjK5Bt9FoiSPRyIi3Sq4egrwAvZaAeZCObJNuUg7edqpTgY6FXkjCgZFUzjxCzMyRiXaQVcVukyFMb0u9i0YrNdjPGVEecXootlMFJzHIFfU4hglb0z1bf54PGS89srEi197ZWLaN3SaC6HOariizUy0m/QpE5+GEuANNVyRzc3ZAjyCeDO6kXqeTtMpy5AozFZEOLjN8Yjb85PAHKcagp1eA3mhZEwVpUPdjfN4J2yyDYNVejfLE+3cG2/lVSNK+wCyDVhFCSfo9tGwiBQXyVdNzzuw3kTnChvjNiPh1MciBWZS9eqwQxipZPZn3C3/Nx+JOu65AoxxKhAKrsNQqNqDKvIKPBVO8IYRpc1MDBJdID2xct/T9vPiudJKa2NI+XgrH+mFejRiV1C1I7VEJgMfR+otOuFS4GWsdxJLh4JUwVoJDOv1eIdTgWC1z0DeiLV20d3l/vdJ1wefNpCOeEXeG2z3ppnUza09QSutfQa4x8KhxUiWYi4YSKj/fKRS9d3IliIXeuIVvoVoU3YZjyRX/YT+2c5bnAqE4x2e7zqxXR10dUTpaGsjkXDuDTIMg2hHB7Fuz7PgCgbDXw1hnQ9zWi2G+l09GhnvcK4NSBWl8cAt2Ogq1osiJEDqGaxv20chodsbkW5mqXjGqUBIW3TCL8xuneaN+w/9kDvb24nH7XuDDMOgKxql0yXBMpAww76+3gd8mNNqybpxwKt6NPJtPRpxupffjcQbHIu4LjfkMMYc4FVgGdJSri/VyFZlBfAeEqWZycj5FycCoSx5Kzg+eLoJIyFuAV3X6erspL21la5olHg8nlb913WdeCxGtKODjrY24rHYoLcXpCTsW8LVLuzFB7iFHdW7ErgN2K1HIw/o0cgVejQyLNtJGehCgptmIA1w7sdePIOKePreAx5Lnv8kYsjcj0R5fpbs3o5XgWec+OYKUhgA6Ae62LlmF+POOdwz1TRN4rEY8djh7amiKCiKgmmamJ6mvw8wQr5pCF/Fn1D4XGJpemwKlwO6Ho2sR4oHrQSe10prc3kT1yRvdYixczFS8MYKYay5UFNhIs2ITacaQsFyYO0uWnZk7gRvmiaGYQTCoC/W05Dd5FbgL35MjNSfdIKGqO/fQUqkNevRyH16NHK5Ho3kEofQxOHtxJVIJqRXJJBaqU+As0jFwja7Gybb/7SFeOfRtf93hVhea+jGkKvTzfmctA9uF4KoQuIWHgB26tHITXo0kos/PIYUUJmL1H+4F3c9MM8mxz1Ub9KJQPDdWZ0NoyXGu3/ZOoD65qTFJI81LJWuvBXweROpCu13L9FtuBdu3JdhQAPQr2GMTV5EbAHjk+M5SfbqqStxBvBK7yec2BB8dVZbpWvLQXasbmLsPHdyG1wkiqiGkeRtd/IWAfYiH/ie5P3e7/UoxN07J3lbgMsZp6F9niewNiMqcSPuZgrmhFZaG9ejkccQi7xXuLXFjiBbk+8jxsQbESFhlTbE7vFYqiedCIQE8gW2avTwjf1P79S10tAPj5ldMx5Rv47Fu3zzDuSHvAdRRXcg79NO5MNsQqzpuWYRfZC8PZv8P4wkv3wGiUd3ljJrqAxpHu5oiAy8C/wM8fsXmob5S9wVCDryub+GWPrvdnFskO/Zz5B1X4tsuVK5HntzALmApHWz2mnUkoplFFhyUwaeQ4QB05bOGYIUuZgC1CBCbRQixauQrZTGYTuJiRTH6EYkbGvy/w+QK/he5MP/AO9UTyuUI63IryX5Wu3Svel4Rr4w08016Yjl/TdItJ5j29NV1z7qdIh+JIug3IsIVhBvxzrgaSSpaBv93YGV9HdZtiTP3Z2jpyFXShGt4Wtpnm9GhMEraZ4HnAuEMUhAhWeXFJcZTZbKu9OWzsnTUjznROTLvRCLOSexXTVUrz6dkHOjYjsSt/8Q0hrd1aYPXggEOCQUZiFCa1OyMOtA4ztIBGRv3kc6RmUtSus0R3gnUpX2YeRKW8i8jgRqHC28CSxJ3qYgQS8zkWi7kYi206x3lHUnttd1D3nnuKGVLVWTkII3dr4XceAdpD3Zi8hV9UUGSLfj3iSrKdkpr1aI3IoUPl6KGDQfBr6JRaHsRtGA9cB0JLb6Sgqv7+MWJG30R1j4kvbeJwwiNiVv/dCGdKJN3Uxi6mZagcrlC4uQBJrRSIBMOfKZliPbJB1RP/chpcR2MijfsgHN75I327jVlmQ3krDxbeA6RE3NuR1PjhjIj38Dsk/akLzZ6jn+FTNEHKmL2IpCOyYdCrSZEMUkqsjfGBDDHHS/hNar748hzWTf7vtc5fKF+V9QQF5xu09RBFFVliLhoOciaurU5M2J768bUXv2JOd5P3nbipSC34xLYa9hYChK0pen9IpjUPrFNPQIjxYUOjBpU6DDhM6k8OgaxMIjYPDhZeOyHYir5e5ejxUBI5A97EgOq6MKMAQxRhkcDsI5gFj191CgzWXtCo+2XppHex/h0aN5xAPhEeAT/w9mjaeEg0egZQAAAABJRU5ErkJggg=="},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAABKCAYAAAAohcEoAAALaklEQVR4nO2db2wT5x3Hv+dzEsdO5oR0GqEEpEDUMG2rprVkUkvCn1bjBRLqhiJB3yFgqiqtAzSpVde+mKpR1qxN/2ib+BOBqrS0L0qiSGgrDWCEAtiZ6KutDELwsoRIiZz/diC+59mLu7MfX5zgnM++S/z7SI9sWQT9fvd7vn7uzvf8vhLMIwmvUprPCWfADe95ms+JHLBUIUiG4dKG+BnhPLgwmOGVc85JaCaRpIWnfKZiMIpJ/vLLL1c3NTXtLC8vf97tdv9QluV1LperDEBx1hETVvKIMTatKMp/4/H4v6ampq719PR8/dJLLw0BUKCKjIFEZopsxaWLSgYgf/fdd03r168/7PF4tgNwWxMikWeU2dnZ7nA4/EF9ff1VAHFoQiOBLQ2z4hJXK3cgEKjbvHnznz0ez4sWx0fYyOzs7MVgMHi0qanpDlSR0Sq2BMyISxeWDKBocHBwb3V19QeSJJXnID7CZjjnU8PDw0fWrFnzGYA5qKsYCSwDliouXVhuAEWRSOT3lZWVr+coNsJBjI2Nvbtq1ap3oAosDhLYY1lMXK50/x7aijU6OvoGCatwqKysfH10dPRNAEVQ5wDd/c0Co7j0a6yicDi8r6qq6k0bYiJspKqq6o1wOLwPqsBc0mJfzcSiiOJK3Lzo6uqqq6mped+mmAibqampeb+rq6sO6qUBCcwk4kFzQT2YJTMzM195vd4XbIqJcADRaPQbn8/3SwAPAcQ558zumJxIJtdcid+yent7G0lYhNfrfeHWrVuNUK+9aPUygVFcRfX19a/ZGA/hIOrq6n4D7doLdHNjyYjikltbW6t9Pt82OwMinIPP59ve2tpaDbpzaArxoVt59+7dvwA90kQkcWtzQgYg0anh0nAJr3JlZeVzdgZDOI/KysrnoV132R3LckNfuVwAXB6Pp97meAiH4fF4nkLq1iIiQ8TTQpfb7a6xOR7CYRQVFdUgdZ4QGSLe0JBcLpfPzmAI5yFJUhlIWKYwPqFBB5BIB80LE6RcpDLGZuwKhHAmNCfMI4qLz83NDdgWCeFI5ubm/gdqZmMKXVwcAI9Go/+xMxjCeUSj0dtI7RpFZIgLQleg4eHh6zbHQziM4eHhGxA6RdkczrJCFxcDwNrb27s554rNMREOgXOutLe3fwOhQ5TNIS0rxC39JQB84+Pjn/v9fnq+kMDExMTlioqKvQBmkNx6QgITeNyWE33lUgDEr1+//tc8xUU4HG0uUNs1k+iy0zdKeqCuXp/5/f6ttkVF2M7ExERAWLVmQRsm05LJZkl99YoDeNTW1vY2/b5RuDDGZtra2t4C8AhCL0N7o1p+pN3mD8AXCoX2PvPMM9RHowDp7e098uyzz36O1GstWrXSkGnfwsRuZGinh319fb+rra2lnckFRH9//0e1tbV/QvJ0cA50vbUgmfYtTDk1BBDbsGFDS39//0e5DY9wCpqw3gMQg3BKSMIyh3EDnC6wOainA7Ha2tr3gsHgUcZYNO/REXmBMRYNBoNHBWE9BK1YWZNudymHeut1DuppQbShoeGLlpaWXePj44G8RkfknPHx8astLS27GhoavgAQRfJUUAHdxMiKjIwYoHpueQCUdHR0PNfY2HiooqJiiyRJtPV7ecIikci17u7uU83NzT1QBfUQ6qmgLqyl3sBI62DpxJVP6AWy2DarjHKwxEIISZEVAyg+dOjQ6oMHD+6oqanZXFZWVldSUrJGluUySZKowY2D4JzHFUWZjsViwxMTE339/f3/PH369NWzZ88+gComfeii0lcsM6JwrIOlJihxTouvRh2IOYjPVc7LwUrzOzeSQtPfy0g2MCmEDZdikWQA8p49e77/6quvbtm4cePP/H7/htLS0mpZln2SJBXZG2pecaSDpSCqdK6oW9xu9ybdFZVzDs75tKIo4Xg8/u+pqalrgUDg783NzcML5ZAT21akikofS/k/lxvi0ywyAHdnZ+fPGxsbf+33+7dIkiTbGJtTsdXBUhNWol63b99uWrdu3W89Hs8O7bNMmJudnb0UDodb6+vrA0iu7oxzzq3sNicGK16LlQLwAvCt0FEGoBxABYCqtra2hqmpqW5OZEwsFvs6EAj8WJsvbm0eSVxdLSwdSL2c8Vy9evUnsVjsawty+Mfly5d/ZMzBjJAeh7iaiSuZewWOYqhfIN/r7+8/xBibzLZQhQhjbHJoaOgA1C/iRJtsnhthFQHwDg0NHWCMTVuZw+Dg4H5jDmZFtChWHhinDaFQxQB8kUjkmFVFKmQikcgxqGcExVYKLJ/1EnLIncCsOChOHUh+A/pGR0ffsbA2Bc/o6OgfxcnJra/Xu7nOYWRk5A8GgZG4MhlIbiL1hsPhg1YWhVAJh8MHoZ5euZHl6mWo16E8pcDu379/QMyBxJVZoWQAnq6urqcZY1OWloTgnHPOGJvq6up6GuoNAtmswMR6Xbhw4adWXmNlkMOkMQddG1krTUtuRaE9eUIum3nACgdLsV7RaLSjtLR0u9VxLkY0Gr3o8/l+BS0HaE+30ONLBsTfRshlM/dk62Ap1Mv97bffNuVbWADg9XpfDIVCW5D6MAWJKw3ksplnsnSwTIhL+39sYdOmTfNyIHHNh1w280yWDpYSAPnjjz9e4/V6bauX1+vd8cknn6yGkAOJS0B4Do1cNvOLKQdL8RR+165dO2FjvSRJcu/cuTORAwDaMpIGctm0gSwcLCU4pF5PPPHEcxByIHGlQi6bNmHSwVKs11O5ii1TjDmQuFIhl02bMOlgmaiX9ve24na710HIgcQ1H3LZtIEsHCwlqLfwy62PamlocyaRA4krPYWw6dOJrIRjnsiBxLUA1HE4v2R7vBlj01bFkkUMKTmQuNJDLpt5JlsHS+3vbeXRo0cDEHIgcc2HXDZtIAsHSw6AaX9vK7FY7A6EHEhcqZDLpk2YdLBM1GtkZORGrmLLlAcPHvRAyIHElQq5bNoAN+9gmajXuXPnLtpZL8658umnn16CkANtORHQHqchl808Y9bB0livycnJc+Xl5VtzGuwCTExMdFdUVLyMpIGFQiuXgFZQctnMM2YdLI31unHjxl9yF+Xi9PT0/A2pbcBp5TIibLwjl808kK2DZZp6nfP7/Y25iTY92sorrlpxAIxWrvmQy2aesMjBMqVeZ86ceSufjjyMsZlTp069jWRLcOtcODPpcbDcBpLtucoBrA6FQoez6bNApCcUCh0GsFo7zsUw2QXKWK/e3t4j+cohGAy+BuAHYg6WCGsFiyvR8ARql90n+/r6Wi2tSoFz7969DwE8qR1fyxrU6PW6f//+R7nO4e7duy3pciBxZVYwN9S2WasArL13796HVhanUNGEtVY7rpa3VhPqlTOBLZSDZcJayeLiPLXJJIAqAGtv3rx5RFGUGQvrVDAoijJz8+bNI9qkrEIOm4Lq9QoGg0etrJeiKNML5WCpsApAXCntkaF+Sz15/PjxbWNjY1esKlghMDY2Fjh+/Pg2qKdRq5CHdtaGegUsyOHKsWPHti6UA4nLfMGKoC7/FVAvwtd3dHTsi0QiVxhjSraFW6EokUjkSkdHxz4A67XjVoE8GjGI9ers7Hx5qfVijMUjkcjl8+fP710sh3TaoN+5MsBgoEYum2ngmoPlw4cPh6anp+8MDAyE2tvbL7W2tg5hvoNl4rY7z8EEely9Xnnller9+/fr9dqo1wsAtBwGp6en7w4MDARPnjzZfeLEieHFcsACt95JXEvAaKYGctkUEa1OdYO4uDbmhPe2md9h8XqJLJSDaG37WPM7EtcSSWcDChScy2Y69InAhKEIwzG2rZhfL/GL0OiHvGgOORVXAfM4A+tCPLaLGo7DqicXzGHWcNx0DoU4AXKBJLxKaT4vBLjhPU/zuVNYqF4iWefwf2DhmaNJnAWoAAAAAElFTkSuQmCC"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAABKCAYAAADNGwREAAAHnklEQVR4nO2db2gTZxzHv3eX2NikpLEMrJAVYsvK3k7bgdpuzrG9ENShMn1v90LYmDJQ3PZqjDE7Db4ZjBnwRRR9MZS+2+xGO9eO2OG74SYSMqfLi9ImtE1bk9ztxd3ZJ9c0ufy5e56S3weOhNLmftBvf33uuef5nIT6kZhXqczXCTHQLO81ANA0TSv/7e4iSfXHpdaflCyHbBzs1wjx0JhDtbxqPIPsRnitYVVu3bq1fXh4+N2Ojo69Ho/nVUVRXpZlOQBgS93VEE7wXFXVxWKx+E+hUPhzYWHh3tTU1I9Hjhx5BqAIPcQqOIXY6fCaoVUAKA8fPhzu6en52Ofz7QfgqfvMBE+KKysr46lU6nJ/f/8kgAKMILsdYKfCy3Zbz8TERN/AwMA3Pp/v7brPRgjHysrKT4lE4uzw8PAj6CF2tQs7EV4zuAoA79OnT090d3dfliSpo+4zEcKiadpCOp0+s2PHjusA8tC7sCsBbnZ4zeB6AHjn5uY+DYVC5+o+A7FpmJ+f/2rbtm1fQA9wAS4EuJHwyuU+D0bHnZ2dPU/BbR1CodC52dnZCwC80DMg9OyRNbzmGNebSqVOdnV1XeBQE8GRrq6u86lU6iT0AMtSI63RYdjwvrg4Gxsb6wuHw5c41URwJhwOXxobG+uDPnQUNsBsUTL0YtuWlpZ+aG9vP8CpJkIAcrncXb/f/x6AVQAFTdNUJ87TjDHvi7ncmZmZIQou0d7efuDBgwdD0Me+QnZfa3i9/f39H3GshxCIvr6+D2GMfSHgxRsbXiUajXb7/f43eRZEiIPf798fjUa7IejMA7uoRjl06NA7oFu+xBoeIxMKAEm0oYPMvCqhUGgPz2II8QiFQnthjHt512LF7LwyANnn8/VzrocQDJ/P9wpKl74KAztskD0eT5hzPYRgeL3eMEpzIgzsBZsky7KfZzGEeEiSFICAwQXW32ETrkBCCITMRckgXFXVJV6FEGIicibY8Gr5fP4Jt0oIIcnn8/+idBOnMJjh1QBouVzub57FEOKRy+X+ArPrWCRkMLtK0+n0NOd6CMFIp9O/g9lpzLmcEszwqgDUeDw+rmlakXNNhCBomlaMx+N3weww5lxSCeyWnzYA/kwmcyMYDNL6BgLZbPaXzs7OEwCWsLY0sqkBbnRJpNl5iwAK09PT3zapLmKTY2SB27b4apixNxei+6B33+vBYPANblUR3MlmsxNM112BQwvSm7EY3ey+BQDPY7HY5yLP7xHOoqrqUiwW+wzAczAuB75VrafsNiAA/vv375/YtWsX7WNrQWZmZs7s3r37BkrHusJtA7LaHWXoK+d9APyPHz/+JBKJ0M6KFiKZTF6JRCJfY224kIeD491meRtKhg4Alnfu3DmaTCavNFYesVkwgnsRwDKYIYNoF2om1gXGZoDz0P9dLEcikYuJROKsqqo516sjXEFV1VwikTjLBHcVDnfcZlBudbwGfWokD/3fRm5wcPDm6OjowUwmM+FqdYTjZDKZydHR0YODg4M3AeSwNlQoQsCLNBZboj3ozl0fgLbbt2/vGRoaGuns7NwnSZJwW0MIW6hzc3P3xsfHvz9+/PgU9MCuQh8qmMF14gKtrKUddf6R2FacYi3EWwBsGRkZ2X7q1Km3wuHwQCAQ6Gtra9uhKEpAkiTawCkQmqYVisXi4vLycjqbzT5OJpN/XL16dfLatWv/QQ+reZihNTuuU123oqW9lvPWKpf2YC3I5nsFaxv0WnFBO/tIAwWAcvTo0ZdOnz69r7e397VgMLhz69at3Yqi+CVJ8vItlTu2Le2wEeK6tf4oDa151PKZmx327qQCwHPnzp3Xh4aGPggGg/skSVI41raZ2NDSjioBbuSBKrLltZW6bkmnjcVivceOHfsyEAjs51zXpmYjSzs2CHEjYWvlR1mZ3dabTCbf7+npGSVrfHPYyNKOMgFuOGgCTwM2HcMYQ9Z4FyhnaYclwDTVVRtkjXcJO5Z2Cq9NjK5L1ngXsVraYQkwhdcGTHDJGu8yVks7mADTmNcGxp1EssZzwmpph3H3jzpvFZiuS9Z4Tlgt7TCaLoW3OmSNF4BylnYKb3XIGi8A5SztFN4KMPO6ZI3nT4mlHQAtabQBWeMFwWppp/BWhqzxAmG1tFN4K0PWeIGwWtopvNUha7wgWC3tFF57tNJyT9F58Xug8NqEDEL8sf4OKLz2IGu8AFgt7RTe6pA1XhCslnYKb2XIGi8QVks7hbcyZI0XhHKWdloSWQHj9jBZ4wWgnKWdOm8FDE8XWeMFwGppB3Xe6jAL0ckaz4lylnYAKnXe6pA1niOVLO3UeW3AbgMCWeNdpZylHcY2IAqvDdidwyBrvGtsZGkHzfPah7lwI2u8S2xkaQfdYasdJsBkjXeQSpZ2kDGnIcga7yC1WtppzFsj7L42kDW+Gajz8/O/Tk5Ofnf48OHfoHfaFZQKr0m01yyYAJM1vgZMS/vq6uqzxcXFR0+ePLkfj8d/jkajz7De0u6o4tQsqNGP2LSwQhKQNd4OrM7ffIRAwTjyzHtH5NLrq2nh8ALrujBZ4ytjhkVljiJzOKL1J6pD1nh7uPpAFaJ2WtkaX4mmPsrqf03MwK9N/obZAAAAAElFTkSuQmCC"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPcAAABmCAYAAAAXtge1AAAIR0lEQVR4nO3dy4/bRAAG8G9sx0sWSoLY3RapEoWqLVAQfdzhRAV/QOE/4MIJzqDCAXrmwI0zEndOVAgQL0FF2wviwPPQU7dSN6y62U1sD4ddbyeTGdu7sceJ/f0kK97Er1j7ecZjjyNeu/wmSiTKXBhRC8myFhQcYFoGl6h6RXJW6ACQF27bivT3GXyicukBVv8WGdPts4XbFFZh+Mw2TkSHJ/EgT2l4hTJuCvpUyE3htpXK6qvpvaxlEFE2W0ltCrRpHqFPo4fbVBLroVYH03SmZRGRXZFgq4Nt/omA51XLTYFmyInKcdBQm0KeVuEzq+WmUKqDZxm3hdy0TCKaJA3jpiAn2rhtGftBt51zm4LtWcbzAk5E+WzBTkMtlHFgOuDqMgBkXwrTg+0B8D567+0zzz1z8konCF4WQjxyyC9CRAVIKTdH4+jb337/4/13P/z4D0yGOh03Xg7zT529CJjPsT19uHrlnWdfPHvmy8D3XxBChBV8FyJSCCGWAt8/fezoyuunTj75xbc/XL9XZDZgN7S2D/Wg+8+efvqKEKJXylYTUWFCiP6555/5AIAP++nwBNOlMNv5ttcJgper2XQiyhOGnZewm0X1nFwPuPFSWF7V3BdCLFe58URkJ4R4FLslt97oluZ14rLYQarltmmJyB31alVmtVwPrH45Sy+9iaheah5NeZ2Y0MR27k1E9cq6gWxqwpTtDjNWy4nmh6nUBgz5NVXL09dCRwcicqpI/w4AD44ARRdGRPUqeou3yKpq24p9IqpPZiOayhRuW+8wIpoPpkxOZTSrtbzIe0TkVuFs5rWAM9BE8yszn3ldPiuTjO4i2riJ+P5fkOMNSBlXubrChPAhOo/Bf/hpBP3z8MKVStYzHA4xGAwwHA4RRVEl66hTEATodrvo9Xrodrt1b06TWXN6kOeWl0PG2LlzDdHGDZT4/PXSSBlDju4iGd3F+N51BP1zWFq7BIhydpWUEuvr6xgMBqUsb15FUYTNzU1sbm6i1+thdXUVQrAi6JLbG1NkjO3bnyPa+BXzGOxpEtHGTWzf/hwoqWbRhmDrBoMB1tfX696M1nEa7p071xBv/eNylaWIt/7Fzp1rMy8nrYq3UXoKQu44C3eys75XFV9M0cYNJDuzlT5tDXaq7d/fNWfhjga3sBhVcRu59x0Ob2trq6RtWUwsud1yFu74/l+uVlWZWb9DHM/HFYG6NPGqwDxzFm453nC1qso04TtQe7gL95xcx55FE74DtQf7aDvk+37dm1CrIHB/W0WbMdwOLS+3+/mSvFPNLYbboV6v3Y98b/v3d43hdqjb7aLf79e9GbXo9/ssuR1juB1bWVlpXQnW6/WwslJNBxyyYwuHY0IIrK2t4ciRI+wVRpViuGvS7Xb5T0+VYrWcqKEYbqKGYriJGorhJmoohpuooRhuooZiuIkaiuEmaiiGm6iheIdaDaIowng8RpIkkHKRnytHeYQQ8DwPnU7HeX92htux0WiE0WhU92aQI1JKxHGMOI4RhiHCMHS2blbLHYqiiMFusdFo5PQhmQy3Q+PxuO5NoJq5PLgz3A61/dHGBCRJ4mxdDDdRQzHcDrX96acEeJ67yDHcDnU6nbo3gWrm8n+A4XYoCAKnl0JovoRh6PRaN69zOxaGITzP400sLcGbWFomCAL++gZVjtVyooZiuIkaiuEmaiiGm6ih2KpTA3b5PLw6W58XDfeOY+zyOZs6u1AuGmfVciEW/9ZL4c32j8Qun+UajUaN/J21srgLd2fxf7pWdGb7dU52+Swf96mds3D7D590tarK+MsnZprfZXe/tuA+tXMW7qB3DoBwtboKCAS983VvBFFhzsLtLa0i6F9wtbrSBf0L8JZWZ1qGy+5+bcF9aud0zyytvQJ/+SmXqyyFv3wCS2uvzLwcdvksH/epndvDnvDx0PE3EPQvYjGq6AJB/zweOv4GUEJrP7t8lst1F8pF437PCB9LR19Fp38R0eAm4vt/Q47vQcr5aBgRXgei04e/fAJB7/zMVXEdu3zOhjexFFfb3vGWVhGuXapr9bVil09yga0RRA3FcBM1FMNN1FBZ4WZLD9H8s+Y0r+RmwInmV2Y+beE2zcSgE9WvcDZN4dYnlLaZiagWpkxOZTTvnFtqfxNRvdRcZha8XtaH2gIYbqL6Se3VOp1ecutHBH0gonplZXMio542kz5BOmMCIJFSblWxtUSUT0q5ib0swn7avP9eVmu5PiTD7Z0fyt5gIipmuL3zPSaDnVmrNlXL9ap5eqRIfvrl1lUp5X8VbDcRZZBSDr7+7uerUPKInMY1/9TZi8Bu5+rc4afrt+4dXX38q2NHV57oBMExIQQ7JxNVSEp5f2u4/fW1b35865NPP/sTQLw3mEI+EW7x2uU3gQdPTvD2xj1l8JUh2BvU99Rp9QMCEeWbOgVWhlgZor1BfU8PefpgBKl3Kja1lid4ENZY+zyBOdwAw01UlPVUGNMBt5XYUyW37YkBpiOJ/pkt2Aw30cHYClU94OprboNaGm6J3TDqTeumZx+lC1NDzVKbaDZ645hazc4arNe7s571k05oKrXVktt0ns1wEx2M7QYyPeT6uPXmMlO4TROnAU9L97SkV8/HTcFmyImy2W5EsYVcH7dWzdVwp4E1rRSYDLKEPdR6oBlwIjM9Y/pdZrZbTbNCvf93VoOaeg6uh5mhJirPYUJumm6C6VKYUMZNG8FgE5WvaMBNnxmXYTvnzqqeq+/x/JqofKbzcHU8K5P7sqrlgDnkptJdv4xGRLPJLJULvJ/7iyPqjFmlOYNN5E6hvB3kN22KLJBVc6LZlFZQ/g97MPg/uikqrAAAAABJRU5ErkJggg=="},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO4AAACZCAYAAAAoyQZbAAAM40lEQVR4nO3dW2wc1R0G8G9mL95dnFAIYDCyqIoCTUNRBVVUtZVQHnmoqJBQEeoLfSAVIFBfeGmJUG8SL1EviCpSqRREVYqoiqiSNlFLIHUghpBQmjhVTOLEIVZ8x/ZeZ2fm9GG9ZDyemZ3dnbPj4/l+0mjX9uzM8X/9+Zy5rnb/Q48hQlqUCyPaYERUC0q3MS9DSdSdMBkKFe5WwfVbkfv7DDVReO5wOr/WAub7nF9wvYKoefzM7zkReRO4mpVmMDXHc68QrwmwV3D9elPno9f3gpZBlGR+PaxXWL1eo7nncQfXqwd1B9Y5ec3ntSyipAoTWufk9/pV4W01VPYKKwNM1Fq7gfUKcHNYHThU9gqcc9J9nvsF2GuZREkiPJ57hdR2Pfdbxuch9tvG9Qqt7vO8VXiJks4vtM3Aao7nwNrwOpcBIPhwkDu0OgD95z9+euv2bVufy2bS92matqnDX4Qo8YQQy0bdfOf0mbHnfvKLX49hdWCbzz0PCaW2br8X8N6m1d3TL5/90Z1f++qX/5lOp+7WNK1Pwu9ClBiapvWlU6k7bh644Xt3bdt64F9Hjs2HeRnQCKTfD90hTm278/bdmqZdG0mriQgAoGnatdvuvH03gBT8Nz9X8Toc5Ld9q2cz6fvkNJ0o2bKZ9E40cubcBnaH1/NwUKvhcorbtERyaJp2DRo9rnsHVjOLqw4NtTNU9puXiKLhPGITOFR2h9F9SMfd6xKRPM6seWVx1Yxe/LZ1iUieoBOb1szY5HfmE4fKRL3h1dsCHtn0Gio3H0Mln4giE+ZaAABX091qYWteSESRC5s1LWj4G7hxTESRC505r+D6XSVERPJ55W1N/oL2Kof5HhFFJ3TuWu0pZliJ4hGYvVbbuEQUn7a2cYlonWNwiRTE4BIpiMElUhCDS6QgBpdIQe18Wh85lMtlFItFlMtlmKYJISL7BMUNTdM0pNNpFAoF9Pf3o1AoxN0kJTG4bTIMA9PT06hUKnE3RUlCCNTrdSwuLmJxcRH5fB433XQTstls3E1TCofKbahUKrh06RJDGyHWtDMMbkiGYWBychK27XWTeeqGbduYnJyEYRhxN0UZDG5IU1NTDK1Etm1jamoq7mYog8ENoVwuo1qtxt2MDa9araJcLsfdDCUwuCEUi8W4m5AYrHU4DG4I7AV6h7UOh8ENwTTNuJuQGKx1OAxuCJrGS5NpfWFwQ0ineZ5Kr7DW4TC4IfT18aOAeyWXy8XdBCUwuCFs3rw57iYkBmsdDoMbQqFQYE/QA7lcjhcdhMTghjQwMABdZ7lk0XUdAwMDcTdDGfxLDCmbzWJwcJDhlUDXdQwODvIKoTbwr7AN+XweQ0NDHDZHKJfLYWhoCPl8Pu6mKIX73tuUzWYxNDTEC+k7pOs60uk08vk8L6TvAoPboUKhwD86ig2HykQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgVJv5BeCAHDMHiXCEoETdOQTqeRzWalfgKG1OBaloVqtcrAUmIIIVCv12GaJnK5HFKplJT1SBsq27bN0FJiCSFQrValfRi6tODW63WGlhKt2fvKIC24/LhEInk5kBZc9rZE8nIgLbj8TFkieTmQFlx+zimRvBxIC24mk2GvS4mmaRoymYyUZUsLrq7ryOVyDC8lkqZpyOVy0j4kTup4NpVKoVAo8MwpSowNceYU0PhF+vr60NfXJ3tVRInBiwyIFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQK4pUAK3hvrPWpV2ciqYbBBe+NtZ716h5Oqkn8UJn3xlKD7Hs4qSbxweW9sdQh8x5Oqkl8cHlvLLXw/WpIfHDZ26qF71dD4oPLPZVq4fvVkPjg8t5YauH71ZD44PLeWOqQeQ8n1SQ+uLw3lhpk38NJNRx3gPfGWs945pQ3BncF741FKuG4g0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUp99lBAsD5WeDMFeDCHDBXBKp1wLLjbll3UjqQywBb+oHbtgBfuRn40g3AeviYq8qlGVQ+mYTx6QyshSJEzYBQvOBaSofWl0Xqun5kb70R+a2DyA/dGHezQlMmuEIA718EDp8F5otxtyZ6lg2Uao1pYg7491ng+n5g5x3AjtuAnn9QnRBY/vgClo+dhrWw8QouLBuiXIVdrqJ+eRal988gdV0/Nn1jOzbd/cUYCt4eJYI7VwJeeR+4vBB3S3prvgj85QRwbBz4/g5gyzW9WW/9sxLm3jiK+pX53qxwnbAWivjs7yMonRzDlu9+C5kv9KjgHQjaxl0XHxI7NgP89nDyQut0eaFRg3Oz8tdVmZjG9L5DiQutU/3KPKb3HULl0kzcTfHNYKudU7GG939TwB+OAmUjzlasD2UD+P1woybS1jF+BXN/fht2pSZvJYqwKzXMvXoY5fNX4mpCYPb8guv1op6GeHoZ+OOI+judomTZwCsjjdpEzZhfxvxfh5Xf6RQlYdmYf2MYxryEgvusMuT3PIPrnlH4vVgWWwB/Og7UzF6uVQ2G2aiNHeU7IgTm33wPwmDB3YRhYv7N9xp7R3u0SnhncJVW27jC47l0H1xM9jZtK5cXGnvYo7L88YVEb9O2Ur8yj6X/jPdiVaEzpwf90LEA56NUAo1DPhTs7bPRvSHLx05HtKSNqzgy2ovVhM2acPe47rS7J+nOz27M47RRmy82atWtysTMhjxOGzVroYjKhPS9zEG5W5U/3fUi9wzNF9oAbCGE9Hf4TGw78dQTRa0q5ya7X0hCyKyVEKKMlZxhbUe5JptBe5Xdk12p1oajbrDbhTnZa9g4LkawWWp8GvuxSmUYl+UdSK9Ua0ewOrSBI12vobJ7uNz8L2C/O3LieSHEkoR2f26Oo7bQZiM4SsFhcniWpMNCQoild0dOPA9H1tBiR1XYHtcGYO95cd/ZQ28dfaBUrhwUQpQk/A6o1mUsdWOKolaixrNbwoq6VkKIUqlcOXjoraMP7Hlx31msDa1vj6vd/9BjwNWLUPSV57pjSjmm9Mrk/J5zXs01te2uh/ceB5Dp5LUJVD/16q6vd7OAvffsZL3Dq+86cbjdent2giuT5ZjMlcn5PXcP3Dw7RrgvMvDaq2zjahAt189teAcX6PSKNCGWoGlbOnpt0jQ2W7rqBmwhlnTWOxS7s3r7bnpibXi9hsqePa/f1UFe/yXcP/MLbVfBFbY5rqUy/EMKQdjmeXQZXFPY41ktxXqHYAq7k3r7dYbu8DofWw6Vm8EVaATNvQva68TV5sKcgW0+Al0MkwHAqteOp1OZroZ/SWHVa8fRZXBrlnU8q6dY7xBqltVpvd07mpxD36DJ93hu0PW4zRm9eltnj+u1XdtxcI3S3MF0rv+Hnb4+SYzS3CEAXe2imjGqBzdlsqx3CDNGtdN6+53Y5A6w+3ngKY9eK2l3g7o51R2PdY+ft5wuHN4zDCF6cmKo0oQYn/j3C0fRQY2d06/GPhoWrHdLQojx3537b7v1dubAKw8dbd8C3mdOOb8OE16vALuDHHqyzWrdMkp7QtQy0SyjtMesLhnoMrg126qXTJP1bqFkmnuWTKOdegf97bvz02p43BTqzKnmY9BY3N0Ar93a7fe6R154GQInggqZaAInLxx54WV0Gdrm9JvzH78MCNbblzjZqFFbdQ06zOMV2KCTL9bwu8ig+bxVr+t+tHy+bmuqzI0bteL0DwDwtJ61irXi9KOVuXEDXdTYOV0sLRlT1Qrr7a04Va08erG01Gm9/bLhfAwzRG555lSrIXPQ7uygnritaWz/s6O2WXsEXe413WAM26w9Mrb/2VFEFNrmtHt0ZLRqW6z3akbVth7ZPTrSbb2DshJmmzZwG9c9o1+AbawNcJhd221Po68/dQC29SDYEwBAEbb14OjrTx2AhFoDsJ/+6MgBU9isd0PRFPaDT390JOp6e+059tuL7LtnOczN4oIW2GobuOvp1GuPH4Bt7QDwYYu2bmQfwrZ2nHrtcWmhbU5PnHzngCXsxNfbEvaOJ06+I6verXrXwENBAJDauv3ebn9JJyl3kZ4+vX+279pbX8ptvnkCmrYdwPUy1rMOnYMQzyx+evLJT/7x055df7f/ysXZW3L9L92SK0xoCau3EOKZDz+bffJnZz6QUe/AMLajeZFB7O56eG/YWXUA3wbwHQDfBHA7gOsAZOW0rGcMAAsAzgF4F8DfAAyj8R860KlXd7W9sr337Aw7K+vtsuvEYbktC+H/2YEX+M1NGS8AAAAASUVORK5CYII="},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAACVCAYAAAD1yACcAAAIqklEQVR4nO2dzW8cRRqHfz3jGR9ISOzgxCZryCEBtLvhAMfVBiQICI5ISHBA3Djw8S/sYZcLnFYrRdrr7mG1h91/YK0VUXYFihCRCBIKgYNjb4QJxE7ifHhm7Ok9tDupqamq/qquab/8Hqk07Zmqt9+xnym/Uz3THb3y+jvwSOQzGPnZEfsKNFWgL6UldZPHsVzyZ4lt25F+P6UnPtHlVX+OHP3uYxPbJGpkeMy2TUhZYjxwKRU3UrZNko8JbhLbNhurt6b7XDEIcWGboU0ym8ZEeh9dbNMMrAutNlM/UyxCbOSRWm228SNyZ5UiJpkpOPFBUaFNgqdli7MUMQmptpZl2ya4KSYhKrFh2yTxUNu2xbgvua3GNkndsmxnyU1IFjapU6EjZRsYl1uNAcC93KdL3QLQeuPdP7x4Kzp8Zu0mjvS3KTCpj+kpxPMH8MMB/PDu38787t8YFTrdNi75tXZvbTX1iNRvvvfhy99tHv7HynXMU2pSN71tRFeuY/7yrSP/fOuD378AzUc4qoWWIR4MA1oA2jfiuT9tDSg0CcvWANH68MgZAG3YhR7BtNxnnbXXbuJIPakT4mbtJuaReKjW4LrcxuU+UzmiTvvtwQ5nazIZeknp28b4G8zU1ZGlvyKliK0vIaFw1dZjHVX0IlyftQmZJKY3joBB8LwzduToS0goXAcGxzqm2I4cshQhTcE0WwMGd20fgnJ9JqQ0Ty4Ap44Dj80A00W+4tBgetvAygZw7lvgm7VJZxOGxVng5FHg8H6g03b3HewA1zaBi1eB/61X3nXWZ5VGVkWyhPVymPz0L4HTT1WJ0Eymp4ATc0lbugQsfT3pjOrl2WPAM4v5+3fawNGDSbuwCnyxXGn3eV2MXOWFszgvwpPzMqXWOf1U8l9JKr+YLSa1zjOLyWxfgdxOmsTWO1cuQ06dqDJ6b3Hq+KQzqI+nj1aPcbJ6DJOPY366VkXy3JeLxZmyI/cekp/r3P6Jx8jtZdZKB480FoS/MDcefz/OUFk1thdWN3xFaj4rgp/rj5vVY1zzEEOhUI3tnXPfhdhLM5D8XL+62owYeQgi9jffJ0th0lm6lDxXqayuJ0t2ZbmwmsQIQbDDJEtfJyXJb48Dj88AXSEHaPrbwJWNZKaWLHXKF8tJSfLrR4sdoPnqajipgYBiA8Cl75NG9jYr15PWZPj5DyISik1EQrGJSCg2EQnFJiKh2EQkFJuIhGITkRQ6QPPxa3WlQUg2r/49f1/O2EQkFJuIhGITkVBsIhKKTURCsYlIKDYRCcUmIqHYRCTBvho2WN/ExtmLGCyvYdgfVIrV6nbQOTaPmeefRme23BlY+jvAT7eBO30gtl5qPh9RBDzUBR7ZB3QzvgPIfKrFyksQsfvrm/jxL//CsFdN6JRhf4De5VVcu7KGubdfQreg3P0dYGUdGFb8g6XEMXC7B9ztA4/NFv/jMR//BClFbpy96E1qlWFvgBtnLxYe99Ntf3+0kXziJDbz8ZtPGYKIPViu78TR/eXiX3u/068hkQqxmY9/gohdtaZ2Efe3i4+pYTaqEpv5+IerIkQkFJuIhGITkVBsIhKKTURCsYlIKDYRCcUmIqHYRCQUm4iEYhORUGwiEopNREKxiUgoNhFJELFb3U5tsaMSF4yMarzgeZnYzMc/QcTuHJuvLXb32ELhMQ91a0ikQmzm458gYh987iRa0/5n7dZ0BwefO1l43CP7gFYNM0crSmIzH7/5lNpXiJ10Dz2MubdfwvQTi6VKB52oO4XpJxaTb6gferh4Pu3k29L7pv38a4yiJFbZb2AzH/8EO69Id3Y/Dr/2m1C7y6TbBh49MOksHsB8/MJVESISik1EQrGJSCg2EQnFJiKh2EQkFJuIhGITkVBsIpJgRx6bdoZ85rO38ilKmCsaNOwM+cxnb+VThiClSNPOkM989lY+ZQgidtPOkM98/I9pQmyVIGI37Qz5zMf/mCbEVuGqCBEJxSYiodhEJBSbiIRiE5FQbCISik1EQrGJSCg2EQnFJiKh2EQkFJuIhGITkVBsIhKKTUQSROymnSGf+fgf04TYKkHEbtoZ8pmP/zFNiK0SROymnSGf+eytfErtK8ROmnaGfOazt/IpQ7grGjTsDPnMx03T8ikKV0WISCg2EQnFJiKh2EQkFJuIhGITkVBsIhKKTURCsYlIKDYRCcUmIqHYRCQUm4iEYhORUGwiEopNREKxiUgoNhEJxSYicYkd6Ip8hJTG6mjWjE25SVNxumkT2zSIkpNJk9tLk9h6x9g2mJAJYPJxzM+sGjs2bBMyKXI72XI9qARQbwmZFHldjPUZW3816I2QSeLycsTPljZI75AOHAIYxnF8u45sCckijuO72PUQ4xPtmLuuVRG9De9t9f7rO2FC8nBvq3cOo1I7KwlTKaKXI+mrZPjp+QsfxXF8q4a8CbESx/GtT89f+AiKi8h4I9k+8atnASDK0z77/MuNuUMzSwvzcwudqamFKIoCncab/ByJ4/jO3Xtbn3zyn/Pv//HPf70MYGe3mQQfETt65fV3gERcIJnBo93btLWVNrXb1PvUvvqLgZAsxkpepe0obXu3qffpgg/TmPr5sU2rIkM8EHVHe3wIs9gAxSb5sJa+GJfbNlOPzdi2E7+bXkX6YzapKTYpgm0y1eVWbzPfPKZix0hE1JdQhmMjHgRThU5vAZYhpDj6G0G1tHA163q261IdaUfTbK3O2Ka6mmKTItgODOqC69vWg4YmsU2dU7nTWT2d4dX62yQ1BScubAdZbILr29ZyRBU7ldW0U2BU4hh2oXWZKTcxofulHz20HT53CX3/Z9ebR7Xm1kWm0MQXZQQ39RvBtNwXKdumJCg18U1euU2PGWPYamxXSaLex3qa+MZUd6vbLh/v4ypFALPgplldXyokpArO2TjH/ZlX5lUHumZxSk1Ckcu1IpeczhOQ5QipgrcJ8v8gDV7OqXwwtQAAAABJRU5ErkJggg=="},function(s,t,a){s.exports=a.p+"static/navbar_1.499e088.png"},function(s,t,a){s.exports=a.p+"static/navbar_2.59ecae2.png"},function(s,t,a){s.exports=a.p+"static/navbar_3.8dcec92.png"},function(s,t,a){s.exports=a.p+"static/navbar_0.b608f86.png"},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNjU3MTM3LDAuMjgxNDcyMzggMy42Mzk0OTY1OSwxLjY4NDU3NDkyIDMuNjM5NDk2NTksMy40MTQ5Mzc5MiBMMy42Mzk0OTY1OSwyOC40ODE1OTc0IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEw2LjM5NTIzNzcsNzYuMDExMjgwMyBDOC4xMzU2MjUwOCw3Ni4wMTEyODAzIDkuNTQ2ODU2MTEsNzQuNjA4MTc3OCA5LjU0Njg1NjExLDcyLjg3NzgxNDggTDkuNTQ2ODU2MTEsNDcuODExMTU1MyBDOS41NDY4NTYxMSw0Ni4yNjUwMjEgOC40MjAxMzA2Niw0NC45ODAxNzEyIDYuOTM4NjI2MjgsNDQuNzI0MTA1OSBDNi43NjIwOTg1MSw0NC42OTM1OTQ2IDYuNTgwNTMzNjgsNDQuNjc3Njg5OCA2LjM5NTIzNzcsNDQuNjc3Njg5OCBMMy4yNDM2MTkyOSw0NC42Nzc2ODk4IEMxLjUwMzIzMTkxLDQ0LjY3NzY4OTggMC4wOTIwMDA4NzY0LDQ2LjA4MDc5MjMgMC4wOTIwMDA4NzY0LDQ3LjgxMTE1NTMgTDAuMDkyMDAwODc2NCw3Mi44Nzc4MTQ4IEMwLjA5MjAwMDg3NjQsNzQuNjA4MTc3OCAxLjUwMjg3NDkxLDc2LjAxMTI4MDMgMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEwzLjI0MzYxOTI5LDc2LjAxMTI4MDMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMjBBMEZGIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZGlhbW9uZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuMDAwMDAwLCA0NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNBRkM4RUIiIHBvaW50cz0iMjQuMTc1MzI2NCA4Ljg2MDY5Nzk1IDE3LjE4NTE4NTIgMjguODM1NzAyNSAzNC4zNzAzNzA0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAwIDguODYwNjk3OTUgMTAuMTk1MDQ0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAzNC4zNzAzNzA0IDguODYwNjk3OTUgMjcuMjU5MjYxNiAwLjA0ODE4NDE3OTciPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjQUZDOEVBIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM2NDk2REMiIHBvaW50cz0iMTcuMTg1MTg1MiAwLjA0ODE4NDE3OTcgNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzkzQjhFRSIgcG9pbnRzPSIyNy4yNTkyNjE2IDAuMDQ4MTg0MTc5NyAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAyNC4xNzUzMjY0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iMTAuMTk1MDQ0IDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDI0LjE3NTMyNjQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzY0OTZEQyIgcG9pbnRzPSIwIDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDEwLjE5NTA0NCA4Ljg2MDY5Nzk1Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},function(s,t,a){s.exports=a.p+"static/hamburger.50e4091.png"},function(s,t){s.exports=["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"]},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){"use strict";function l(s){a(667)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(669),n=a.n(e),r=a(673),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(668);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("c00c0064",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,'.page-changelog{padding-bottom:100px}.page-changelog .fr:hover a{color:#409eff}.page-changelog .fr{float:right;padding:0}.page-changelog .fr a{display:block;padding:10px 15px;color:#333}.page-changelog .fr.el-button{-ms-transform:translateY(-3px);transform:translateY(-3px)}.page-changelog .heading{font-size:24px;margin-bottom:60px;color:#333}.page-changelog .timeline{padding:0;padding-bottom:10px;position:relative;color:#5e6d82}.page-changelog .timeline>li{position:relative;padding-bottom:15px;list-style:none;line-height:1.8;border:1px solid #ddd;border-radius:4px}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline ul{padding:30px 30px 15px}.page-changelog .timeline ul ul{padding:0;padding-top:5px;padding-left:27px}.page-changelog .timeline ul ul li{padding-left:0;color:#555;word-break:normal}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #333;margin-right:-12px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:16px;list-style:none;padding-left:20px;padding-bottom:5px;color:#333;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:6px;height:6px;border-radius:50%;background-color:#333;-ms-transform:translateX(-20px);transform:translateX(-20px);display:inline-block;vertical-align:middle}.page-changelog .timeline i{padding:0 20px;display:inline-block}.page-changelog .timeline h3{margin:0;padding:15px 30px;border-bottom:1px solid #ddd;font-size:20px;color:#333;font-weight:700}.page-changelog .timeline h3 a{opacity:1;font-size:20px;float:none;margin-left:0;color:#333}.page-changelog .timeline h4{margin:0;margin-bottom:-10px;font-size:18px;padding-left:54px;padding-top:30px;font-weight:700}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;right:30px;font-style:normal;top:23px;font-size:16px;color:#666}',""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(670),e=function(s){return s&&s.__esModule?s:{default:s}}(l);t.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),e='

  • '+l+"

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

  • '+l+"

    ")}e=e.replace(/#(\d+)/g,'#$1'),e=e.replace(/@(\w+)/g,'@$1'),this.$refs.timeline.innerHTML=e+"
    • ",s.$el.remove()}}},function(s,t,a){s.exports=a(671)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(672),e=a(0),n=e(null,l.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changelog")]),a("h3",{attrs:{id:"2-2-0-graphite"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.2.0 Graphite")]),a("p",[a("em",[s._v("2018-02-12")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features")]),a("ul",[a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("popper-class")]),s._v(" and "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attributes for SubMenu, #9604 #9771")]),a("li",[s._v("Horizontal Menu now supports multi-layered SubMenu, #9741")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("node-contextmenu")]),s._v(" event, #9678")]),a("li",[s._v("Now you can customize node template using scoped slot, #9686")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("getNode")]),s._v(", "),a("code",{pre:!0},[s._v("remove")]),s._v(", "),a("code",{pre:!0},[s._v("append")]),s._v(", "),a("code",{pre:!0},[s._v("insertBefore")]),s._v(", "),a("code",{pre:!0},[s._v("insertAfter")]),s._v(", "),a("code",{pre:!0},[s._v("getCheckedKeys")]),s._v(", "),a("code",{pre:!0},[s._v("getHalfCheckedNodes")]),s._v(", "),a("code",{pre:!0},[s._v("getHalfCheckedKeys")]),s._v(" methods and "),a("code",{pre:!0},[s._v("check")]),s._v(" event, #9718 #9730")])])]),a("li",[s._v("Transfer\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("clearQuery")]),s._v(" method, #9753")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("popper-append-to-body")]),s._v(" attribute, #9782")])])])]),a("h4",{attrs:{id:"bug-fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),a("ul",[a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Fixed clicking expanding icon of an expandable row triggers "),a("code",{pre:!0},[s._v("row-click")]),s._v(" event, #9654")]),a("li",[s._v("Fixed layout not update when column width is changed by user dragging, #9668")]),a("li",[s._v("Fixed style issue when summary row co-exists with fixed columns, #9667")])])]),a("li",[s._v("Container\n"),a("ul",[a("li",[s._v("Fixed container components not stretching in IE11, #9655")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("Fixed Loading not showing when the value of "),a("code",{pre:!0},[s._v("v-loading")]),s._v(" is changed to true in the "),a("code",{pre:!0},[s._v("mounted")]),s._v(" hook, #9722")])])]),a("li",[s._v("Switch\n"),a("ul",[a("li",[s._v("Fixed two native click events are triggered when Switch is clicked, #9760")])])])]),a("h3",{attrs:{id:"2-1-0-charcoal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.1.0 Charcoal")]),a("p",[a("em",[s._v("2018-01-31")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features")]),a("ul",[a("li",[s._v("Cascader\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("focus")]),s._v(" and "),a("code",{pre:!0},[s._v("blur")]),s._v(" events, #9184 (by @viewweiwu)")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("The "),a("code",{pre:!0},[s._v("filter-method")]),s._v(" now has a third param "),a("code",{pre:!0},[s._v("column")]),s._v(", #9196 (by @liyanlong)")])])]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("prefix-icon")]),s._v(" and "),a("code",{pre:!0},[s._v("clear-icon")]),s._v(" attributes, #9237 (by @AdamSGit)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("default-time")]),s._v(" attribute, #9094 (by @nighca)")]),a("li",[a("code",{pre:!0},[s._v("value-format")]),s._v(" now supports "),a("code",{pre:!0},[s._v("timestamp")]),s._v(", #9319 (by @wacky6)")])])]),a("li",[s._v("InputNumber\n"),a("ul",[a("li",[s._v("Now the binding value can be "),a("code",{pre:!0},[s._v("undefined")]),s._v(", #9361")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("auto-complete")]),s._v(" attribute, #9388")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute, #9529")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("validateOnRuleChange")]),s._v(" attribute, #8141")])])]),a("li",[s._v("Notificaition\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("closeAll")]),s._v(" method, #9514")])])])]),a("h4",{attrs:{id:"bug-fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),a("ul",[a("li",[s._v("InputNumber\n"),a("ul",[a("li",[s._v("Fixed value resetting when typing decimal point, #9116")])])]),a("li",[s._v("Dropdown\n"),a("ul",[a("li",[s._v("Fixed dropdown menu incorrect positioning when the page only has a horizontal scrollbar in some browsers, #9138 (by @banzhuanmei)")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Fixed an error in calculating number of fixed columns after the column data changes, #9188（by @kolesoffac）")]),a("li",[s._v("Fixed the border of the last column of the grouped header not properly displayed, #9326")]),a("li",[s._v("Fixed incorrect positioning of table header in Safari, #9327")]),a("li",[s._v("Fixed expanded row collapsing when the table data changes, #9462")]),a("li",[s._v("Fixed unnecessary multiple renders in some conditions, #9426")]),a("li",[s._v("Fixed column width calculation error when "),a("code",{pre:!0},[s._v("width")]),s._v(" of TableColumn changes, #9426")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("Fixed Loading not hiding correctly in some conditions, #9313")])])]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("focus")]),s._v(" method not working in range mode, #9437")]),a("li",[s._v('Fixed clicking the "now" button still selecting the current date even if it is disabled, #9470 (by @wacky6)')]),a("li",[s._v("Fixed date clamping when navigating, #9577 (by @wacky6)")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("Fixed style error in IE 11, #9454")])])])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes")]),a("ul",[a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("The popup menu in "),a("code",{pre:!0},[s._v("collapse")]),s._v(" mode now appends directly to "),a("code",{pre:!0},[s._v("body")]),s._v(", so that it is visible when nested in Aside, #9263")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Now checking the checkboxes in multi-selection Table doesn't trigger "),a("code",{pre:!0},[s._v("row-click")]),s._v(" event, #9467")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("The "),a("code",{pre:!0},[s._v("z-index")]),s._v(" of non-fullscreen loading mask is changed to 2000. The "),a("code",{pre:!0},[s._v("z-index")]),s._v(" of fullscreen loading mask will update dynamically with the popup components, #9522")])])]),a("li",[s._v("Dropdown\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("show-timeout")]),s._v(" and "),a("code",{pre:!0},[s._v("hide-timeout")]),s._v(" attributes now only works when trigger is "),a("code",{pre:!0},[s._v("hover")]),s._v(", #9573")])])])]),a("h3",{attrs:{id:"2-0-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.11")]),a("p",[a("em",[s._v("2018-01-08")])]),a("ul",[a("li",[s._v("Fixed border color issue of Select when in "),a("code",{pre:!0},[s._v("prepend")]),s._v(" or "),a("code",{pre:!0},[s._v("append")]),s._v(" slot of Input, #9089")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("remove-tag")]),s._v(" event's parameter of Select, #9090")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("show-timeout")]),s._v(" and "),a("code",{pre:!0},[s._v("hide-timeout")]),s._v(" attributes for SubMenu, #8934 (by @HugoLew)")]),a("li",[s._v("Fixed missing Tooltip style of "),a("code",{pre:!0},[s._v("show-overflow-tooltip")]),s._v(" when Table is imported on demand, #9130")]),a("li",[s._v("Fixed Table column's sorting malfunctioning after "),a("code",{pre:!0},[s._v("clearSort")]),s._v(" is executed on that column, #9100 (by @zEmily)")]),a("li",[s._v("i18n config file for Czech is renamed from "),a("code",{pre:!0},[s._v("cz")]),s._v(" to "),a("code",{pre:!0},[s._v("cs-CZ")]),s._v(", #9164")])]),a("h3",{attrs:{id:"2-0-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.10")]),a("p",[a("em",[s._v("2017-12-29")])]),a("ul",[a("li",[s._v("Fixed wrong max height calculation of Table when fixed column and summary row co-exist, #9026")]),a("li",[s._v("Fixed uncompiled color style of empty text in Table, #9028")]),a("li",[s._v("Now DatePicker only emits "),a("code",{pre:!0},[s._v("change")]),s._v(" event when value is truly changed, #9029 (by @remizovvv)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("tabindex")]),s._v(" attribute for Input, #9041 (by @dicklwm)")])]),a("h3",{attrs:{id:"2-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.9🎄")]),a("p",[a("em",[s._v("2017-12-24")])]),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("before-remove")]),s._v(" hook function for Upload, #8788 (by @firesh)")]),a("li",[s._v("Fixed initial value of "),a("code",{pre:!0},[s._v("error")]),s._v(" not working for FormItem, #8840")]),a("li",[s._v("Now Loading directive supports custom class name by assigning "),a("code",{pre:!0},[s._v("element-loading-custom-class")]),s._v(" attribute, #8826 (by @earlymeme)")]),a("li",[s._v("Fixed CarouselItem becoming invisible when data is asynchronously updated, #8921")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("renderAfterExpand")]),s._v(" attribute for Tree, #8972")])]),a("h3",{attrs:{id:"2-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.8")]),a("p",[a("em",[s._v("2017-12-12")])]),a("ul",[a("li",[s._v("Added Spanish documentation")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("show-timeout")]),s._v(" of Dropdown not working when trigger is click, #8734 (by @presidenten)")]),a("li",[s._v("Fixed Form validation timing for rules whose trigger is blur, #8776")]),a("li",[s._v("Fixed blur event of ranged DatePicker, #8784")]),a("li",[a("code",{pre:!0},[s._v("format")]),s._v(" of TimePicker now supports AM/PM, #8620 (by @firesh)")])]),a("h3",{attrs:{id:"2-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.7")]),a("p",[a("em",[s._v("2017-11-29")])]),a("ul",[a("li",[s._v("Fixed disabled text button style, #8570")])]),a("h3",{attrs:{id:"2-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.6")]),a("p",[a("em",[s._v("2017-11-29")])]),a("ul",[a("li",[s._v("Fixed style bug of Table's sorting icons, #8405")]),a("li",[s._v("Fixed trigger mechanism for Popover when its "),a("code",{pre:!0},[s._v("trigger")]),s._v(" is manual, #8467")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("prefix-icon")]),s._v(" and "),a("code",{pre:!0},[s._v("suffix-icon")]),s._v(" attributes for Autocomplete, #8446 (by @liyanlong)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("separator")]),s._v(" attribute for Cascader, #8501")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("clearable")]),s._v(" attribute for Input, #8509 (by @lbogdan)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("background")]),s._v(" attribute for Pagination, #8553")])]),a("h3",{attrs:{id:"2-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.5")]),a("p",[a("em",[s._v("2017-11-17")])]),a("ul",[a("li",[s._v("Fixed Popover, Tree, Breadcrumb and Cascader regression in 2.0.4, #8188 #8217 #8283")]),a("li",[s._v("Fixed memory leak of clickoutside directive, #8168 #8225 (by @badpunman @STLighter)")]),a("li",[s._v("Fixed multiple Select height when its value is cleared, #8317 (by @luciy)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("collapse-tags")]),s._v(" attribute for multiple Select to replace tags with one line of text, #8190")]),a("li",[s._v("Fixed high CPU consumption caused by hidden Table, #8351")]),a("li",[s._v("Now you can use "),a("code",{pre:!0},[s._v("doLayout")]),s._v(" method of Table to update its layout, #8351")])]),a("h3",{attrs:{id:"2-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.4")]),a("p",[a("em",[s._v("2017-11-10")])]),a("ul",[a("li",[s._v("Improved accessibility for Cascader, Dropdown, Message, Notification, Popover, Tooltip and Tree")]),a("li",[s._v("Fixed Container resize when the width of viewport decreases, #8042")]),a("li",[s._v("Fixed Tree's "),a("code",{pre:!0},[s._v("updateKeyChildren")]),s._v(" incorrectly deleting child nodes, #8100")]),a("li",[s._v("Fixed bordered CheckboxButton's height when nested in a Form, #8100")]),a("li",[s._v("Fixed Menu's parsing error for custom colors, #8153 (by @zhouyixiang)")])]),a("h3",{attrs:{id:"2-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.3")]),a("p",[a("em",[s._v("2017-11-03")])]),a("ul",[a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("editable")]),s._v(" and "),a("code",{pre:!0},[s._v("readonly")]),s._v(" attributes for ranged DatePicker, #7922")]),a("li",[s._v("Fixed style error of nested Tabs, #7941")]),a("li",[s._v("Fixed style error of the last Step of vertical Steps, #7980")]),a("li",[s._v("Fixed trigger timing of "),a("code",{pre:!0},[s._v("current-change")]),s._v(" event for Pagination, #7995")]),a("li",[s._v("Fixed unregistered Tooltip in Menu, #7995")])]),a("h3",{attrs:{id:"2-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.2")]),a("p",[a("em",[s._v("2017-10-31")])]),a("ul",[a("li",[s._v("Now right-clicking the buttons of InputNumber won't change its value, #7817")]),a("li",[a("code",{pre:!0},[s._v("validate")]),s._v(" method of Form can now wait for asynchronous validations before executing its callback, #7774 (by @Allenice)")]),a("li",[s._v("Fixed range selection of DatePicker not working in Chromium 53-57 browsers, #7838")]),a("li",[s._v("Fixed missing preview and delete icons of Upload when its "),a("code",{pre:!0},[s._v("list-type")]),s._v(" is picture-card, #7857")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("sort-by")]),s._v(" attribute for TableColumn, #7828 (by @wangfengming)")]),a("li",[s._v("Fixed DatePicker sometimes displaying wrong year number when selecting the first week in week mode, #7860 (by @hh23485)")]),a("li",[s._v("Fixed icon style error of vertical Steps, #7891")]),a("li",[s._v("The hot area for node arrows in Tree is expanded, #7891")])]),a("h3",{attrs:{id:"2-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.1")]),a("p",[a("em",[s._v("2017-10-28")])]),a("ul",[a("li",[s._v("Fixed style error of RadioButton and CheckboxButton, #7793")]),a("li",[s._v("Fixed TimePicker not respond to mouse scroll in some conditions, #7811")]),a("li",[s._v("Fixed incomplete styles of some components when imported on demand, #7811")])]),a("h3",{attrs:{id:"2-0-0-carbon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.0 Carbon")]),a("p",[a("em",[s._v("2017-10-27")])]),a("h4",{attrs:{id:"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("General\n"),a("ul",[a("li",[s._v("A new theme: "),a("code",{pre:!0},[s._v("theme-chalk")])]),a("li",[s._v("Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),a("li",[s._v("Added TypeScript typings")]),a("li",[s._v("All existing icons are redesigned. Some new icons are added")]),a("li",[s._v("Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions")]),a("li",[s._v("Added layout components: Container, Header, Aside, Main, Footer")]),a("li",[s._v("Now you can configure component sizes globally. When importing Element, you can add a global config object with a "),a("code",{pre:!0},[s._v("size")]),s._v(" prop to configure default sizes for all components.")])])]),a("li",[s._v("Button\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("round")]),s._v(" attribute. It's used for round-cornered Buttons #6643")])])]),a("li",[s._v("TimeSelect\n"),a("ul",[a("li",[s._v("Now can be navigated by "),a("code",{pre:!0},[s._v("Up")]),s._v(" and "),a("code",{pre:!0},[s._v("Down")]),s._v(", and hitting "),a("code",{pre:!0},[s._v("Enter")]),s._v(" selects the time #6023")])])]),a("li",[s._v("TimePicker\n"),a("ul",[a("li",[s._v("Now can be navigated by arrow keys, and hitting "),a("code",{pre:!0},[s._v("Enter")]),s._v(" selects the time #6050")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("start-placeholder")]),s._v(" and "),a("code",{pre:!0},[s._v("end-placeholder")]),s._v(". They're placeholders for the two input boxes in range mode #7169")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("arrow-control")]),s._v(" attribute to spin the time with arrows #7438")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("Now child nodes don't render before the first expand #6257")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("check-descendants")]),s._v(" attribute. It determines if child nodes are checked when checking their parent node in "),a("code",{pre:!0},[s._v("lazy")]),s._v(" mode #6235")])])]),a("li",[s._v("Tag\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute #7203")])])]),a("li",[s._v("Datepicker\n"),a("ul",[a("li",[s._v("Now "),a("code",{pre:!0},[s._v("timeFormat")]),s._v(" can format the TimePicker when type is set to "),a("code",{pre:!0},[s._v("datetimerange")]),s._v(" #6052")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("start-placeholder")]),s._v(" and "),a("code",{pre:!0},[s._v("end-placeholder")]),s._v(". They're placeholders for the two input boxes in range mode #7169")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("value-format")]),s._v(" attribute to customize the format of the binding value, #7367")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("unlink-panels")]),s._v(" attribute to unlink the two date panels when selecting a date range")])])]),a("li",[s._v("MessageBox\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("closeOnHashChange")]),s._v(" attribute #6043")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute so that the content can be centered #7029")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("roundButton")]),s._v(" attribute to display round Buttons #7029")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" attribute. When set to "),a("code",{pre:!0},[s._v("true")]),s._v(", "),a("code",{pre:!0},[s._v("message")]),s._v(" will be parsed as HTML string"),a("sup",[s._v("*")]),s._v(" #6043")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("inputType")]),s._v(" attribute to assign type for the inner input box, #7651")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("width")]),s._v("、"),a("code",{pre:!0},[s._v("fullscreen")]),s._v("、"),a("code",{pre:!0},[s._v("append-to-body")]),s._v(" attributes. Now Dialog can be nested")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute so that the content can be centered #7042")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("focus-after-closed")]),s._v("、"),a("code",{pre:!0},[s._v("focus-after-open")]),s._v(" to improve accessibility #6511")])])]),a("li",[s._v("ColorPicker\n"),a("ul",[a("li",[s._v("Now you can type colors in the input box #6167")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("size")]),s._v(" and "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attributes #7026")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("popper-class")]),s._v(" attribute #7351")])])]),a("li",[s._v("Message\n"),a("ul",[a("li",[s._v("Now color of the icons can be overridden by CSS #6207")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" attribute. When set to "),a("code",{pre:!0},[s._v("true")]),s._v(", "),a("code",{pre:!0},[s._v("message")]),s._v(" will be parsed as HTML string"),a("sup",[s._v("*")]),s._v(" #6207")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute so that the content can be centered #6875")])])]),a("li",[s._v("Notification\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("position")]),s._v(" attribute to configure where Notification pops up #6231")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" attribute. When set to "),a("code",{pre:!0},[s._v("true")]),s._v(", "),a("code",{pre:!0},[s._v("message")]),s._v(" will be parsed as HTML string"),a("sup",[s._v("*")]),s._v(" #6231")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("showClose")]),s._v(" attribute to hide the close button #6402")])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("show-score")]),s._v(" attribute to determine if current score is displayed #6295")])])]),a("li",[s._v("Tabs\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("tab-position")]),s._v(" attribute #6096")])])]),a("li",[s._v("Radio\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("border")]),s._v(" and "),a("code",{pre:!0},[s._v("size")]),s._v(" attributes #6690")])])]),a("li",[s._v("Checkbox\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("border")]),s._v(" and "),a("code",{pre:!0},[s._v("size")]),s._v(" attributes #6690")])])]),a("li",[s._v("Alert\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute so that the content can be centered #6876")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("background-color")]),s._v(", "),a("code",{pre:!0},[s._v("text-color")]),s._v(" and "),a("code",{pre:!0},[s._v("active-text-color")]),s._v(" attributes #7064")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("open")]),s._v(" and "),a("code",{pre:!0},[s._v("close")]),s._v(" methods to open and close SubMenu programmatically, #7412")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("inline-message")]),s._v(" attribute to determine if the validation message is displayed in inline style #7032")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("status-icon")]),s._v(" attribute to display a feedback icon when validated #7032")]),a("li",[s._v("Form and FormItem now have a "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute. Inner components will inherit this size if not specified on themselves, #7428")]),a("li",[a("code",{pre:!0},[s._v("validate")]),s._v(" method will now return a promise if the callback is omitted, #7405")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("clearValidate")]),s._v(" method for clearing validating results for all form items, #7623")])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("suffix")]),s._v(" and "),a("code",{pre:!0},[s._v("prefix")]),s._v(" named slots, "),a("code",{pre:!0},[s._v("suffixIcon")]),s._v(" and "),a("code",{pre:!0},[s._v("prefixIcon")]),s._v(" attributes to add contents inside the input box #7032")])])]),a("li",[s._v("Breadcrumb\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("separator-class")]),s._v(" attribute to support icons as item separators #7203")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("simple")]),s._v(" attribute to activate simple-styled Steps #7274")])])]),a("li",[s._v("Pagination\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("prev-text")]),s._v(" and "),a("code",{pre:!0},[s._v("next-text")]),s._v(" attributes to customize texts of previous page and next page #7005")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("Now you can customize spinner icon and background color with "),a("code",{pre:!0},[s._v("spinner")]),s._v(" and "),a("code",{pre:!0},[s._v("background")]),s._v(" prop, #7390")])])]),a("li",[s._v("Autocomplete\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("debounce")]),s._v(" attribute, #7413")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("limit")]),s._v(" and "),a("code",{pre:!0},[s._v("on-exceed")]),s._v(" attributes to limit the amount of files, #7405")])])]),a("li",[s._v("DateTimePicker\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("time-arrow-control")]),s._v(" attribute to activate "),a("code",{pre:!0},[s._v("arrow-control")]),s._v(" of the nesting TimePicker, #7438")])])]),a("li",[s._v("Layout\n"),a("ul",[a("li",[s._v("Added a new breakpoint "),a("code",{pre:!0},[s._v("xl")]),s._v(" for viewport wider than 1920px")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("span-method")]),s._v(" attribute for merging cells")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("clearSort")]),s._v(" method to clear sorting programmatically")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("clearFilter")]),s._v(" method to clear filter programmatically")]),a("li",[s._v("For expandable rows, when a row is expanded, a "),a("code",{pre:!0},[s._v(".expanded")]),s._v(" class will be added to its class list, so that you can customize its style")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("toggleRowExpansion")]),s._v(" method to expand or collapse expandable rows programmatically")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("cell-class-name")]),s._v(" attribute to assign class name for cells")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("cell-style")]),s._v(" attribute to style cells")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("header-row-class-name")]),s._v(" attribute to assign class name for header rows")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("header-row-style")]),s._v(" attribute to style header rows")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("header-cell-class-name")]),s._v(" attribute to assign class name for header cells")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("header-cell-style")]),s._v(" attribute to style header cells")]),a("li",[s._v("TableColumn's "),a("code",{pre:!0},[s._v("prop")]),s._v(" attribute now accepts "),a("code",{pre:!0},[s._v("object[key]")]),s._v(" notations")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("index")]),s._v(" attribute for TableColumn to customize row indices")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("reserve-keyword")]),s._v(" attribute for reserving current search keyword after selecting an option")])])])]),a("h4",{attrs:{id:"bug-fixes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),a("ul",[a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("v-model")]),s._v(" returning the second day of the selected week in week mode #6038")]),a("li",[s._v("Fixed the first input being cleared in "),a("code",{pre:!0},[s._v("daterange")]),s._v(" type #6021")])])]),a("li",[s._v("DateTimePicker\n"),a("ul",[a("li",[s._v("Fixed DateTimePicker and TimePicker affecting each other when picked #6090")]),a("li",[s._v("Fixed hour and second can be beyond limit when selecting time #6076")])])]),a("li",[s._v("TimePicker\n"),a("ul",[a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("v-model")]),s._v(" not update correctly when blurred #6023")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Fixed texts having blurry edges when opening and closing nesting dropdowns #6088")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Fixed a bug that Table remains hiding when its parent element appears from "),a("code",{pre:!0},[s._v("display: none")])]),a("li",[s._v("Fixed Table expanding its width when its parent element has "),a("code",{pre:!0},[s._v("display: flex")])]),a("li",[s._v("Fixed a bug that fixed columns of a Table with "),a("code",{pre:!0},[s._v("append")]),s._v(" slot would disappear when data is dynamically fetched")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("expand-row-keys")]),s._v(" attribute not working with initial value")]),a("li",[s._v("Fixed filter failing when "),a("code",{pre:!0},[s._v("data")]),s._v(" updates")]),a("li",[s._v("Fixed a calculation error of fixed columns layout with grouped headers")]),a("li",[s._v("Fixed a dynamic "),a("code",{pre:!0},[s._v("max-height")]),s._v(" bug")]),a("li",[s._v("Fixed some style calculation errors")])])])]),a("h4",{attrs:{id:"breaking-changes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes")]),a("ul",[a("li",[s._v("General\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("theme-default")])]),a("li",[s._v("Compatible with Vue 2.5.2+ and IE 10+")]),a("li",[a("code",{pre:!0},[s._v("change")]),s._v(" event of form components and "),a("code",{pre:!0},[s._v("current-change")]),s._v(" event of Pagination now only trigger on user interaction")]),a("li",[a("code",{pre:!0},[s._v("size")]),s._v(" attribute of Button and form components now accept "),a("code",{pre:!0},[s._v("medium")]),s._v(", "),a("code",{pre:!0},[s._v("small")]),s._v(" and "),a("code",{pre:!0},[s._v("mini")])]),a("li",[s._v("To facilitate the use of third-party icons, "),a("code",{pre:!0},[s._v("icon")]),s._v(" attribute of Button and Steps, "),a("code",{pre:!0},[s._v("prefix-icon")]),s._v(" and "),a("code",{pre:!0},[s._v("suffix-icon")]),s._v(" attributes of Input now require a full class name")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute. Now the size of Dialog can be configured by "),a("code",{pre:!0},[s._v("width")]),s._v(" and "),a("code",{pre:!0},[s._v("fullscreen")])]),a("li",[s._v("Now the visibility of Dialog cannot be controlled by "),a("code",{pre:!0},[s._v("v-model")])])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("text-template")]),s._v(" is renamed to "),a("code",{pre:!0},[s._v("score-template")])])])]),a("li",[s._v("Dropdown\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("menu-align")]),s._v(" is renamed to "),a("code",{pre:!0},[s._v("placement")]),s._v(". Now it supports more positions")])])]),a("li",[s._v("Transfer\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("footer-format")]),s._v(" is renamed to "),a("code",{pre:!0},[s._v("format")])])])]),a("li",[s._v("Switch\n"),a("ul",[a("li",[s._v("Attributes starting with "),a("code",{pre:!0},[s._v("on-*")]),s._v(" will be parsed to events in JSX, making all "),a("code",{pre:!0},[s._v("on-*")]),s._v(" attributes of Switch not\nable to work in JSX. So "),a("code",{pre:!0},[s._v("on-*")]),s._v(" attributes are renamed to "),a("code",{pre:!0},[s._v("active-*")]),s._v(", and accordingly "),a("code",{pre:!0},[s._v("off-*")]),s._v(" attributes are renamed to "),a("code",{pre:!0},[s._v("inactive-*")]),s._v(". This change affects the following attributes: "),a("code",{pre:!0},[s._v("on-icon-class")]),s._v(", "),a("code",{pre:!0},[s._v("off-icon-class")]),s._v(", "),a("code",{pre:!0},[s._v("on-text")]),s._v(", "),a("code",{pre:!0},[s._v("off-text")]),s._v(", "),a("code",{pre:!0},[s._v("on-color")]),s._v(", "),a("code",{pre:!0},[s._v("off-color")]),s._v(", "),a("code",{pre:!0},[s._v("on-value")]),s._v(", "),a("code",{pre:!0},[s._v("off-value")])]),a("li",[a("code",{pre:!0},[s._v("active-text")]),s._v(" and "),a("code",{pre:!0},[s._v("inactive-text")]),s._v(" attributes now don't have default values")])])]),a("li",[s._v("Tag\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("type")]),s._v(" attribute now accepts "),a("code",{pre:!0},[s._v("success")]),s._v(", "),a("code",{pre:!0},[s._v("info")]),s._v(", "),a("code",{pre:!0},[s._v("warning")]),s._v(" and "),a("code",{pre:!0},[s._v("danger")])])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("theme")]),s._v(" attribute. The color of Menu can be configured using "),a("code",{pre:!0},[s._v("background-color")]),s._v(", "),a("code",{pre:!0},[s._v("text-color")]),s._v(" and "),a("code",{pre:!0},[s._v("active-text-color")])])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("icon")]),s._v(" attribute. Now the suffix icon can be configured using "),a("code",{pre:!0},[s._v("suffix-icon")]),s._v(" attribute or "),a("code",{pre:!0},[s._v("suffix")]),s._v(" named slot")]),a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("on-icon-click")]),s._v(" attribute and "),a("code",{pre:!0},[s._v("click")]),s._v(" event. Now to add click handler on icons, please use named slots")]),a("li",[a("code",{pre:!0},[s._v("change")]),s._v(" event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use "),a("code",{pre:!0},[s._v("input")]),s._v(" event.")])])]),a("li",[s._v("Autocomplete\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("custom-item")]),s._v(" attribute. Now the template of input suggestions can be customized using "),a("code",{pre:!0},[s._v("scoped slot")])]),a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("props")]),s._v(" attribute. Now you can use "),a("code",{pre:!0},[s._v("value-key")]),s._v(" attribute to designate key name of the input suggestion object for display")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute")]),a("li",[s._v("Now the Steps will fill its parent container by default")])])]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("The params of DatePicker's "),a("code",{pre:!0},[s._v("change")]),s._v(" event is now the binding value itself. Its format is controlled by "),a("code",{pre:!0},[s._v("value-format")])])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Removed support for customizing column template using "),a("code",{pre:!0},[s._v("inline-template")])]),a("li",[a("code",{pre:!0},[s._v("sort-method")]),s._v(" now aligns with "),a("code",{pre:!0},[s._v("Array.sort")]),s._v(". It should return a number instead of a boolean")]),a("li",[a("code",{pre:!0},[s._v("append")]),s._v(" slot is moved outside the "),a("code",{pre:!0},[s._v("tbody")]),s._v(" element to avoid multiple rendering")]),a("li",[a("code",{pre:!0},[s._v("expand")]),s._v(" event is renamed to "),a("code",{pre:!0},[s._v("expand-change")])]),a("li",[s._v("The params of "),a("code",{pre:!0},[s._v("row-class-name")]),s._v(" and "),a("code",{pre:!0},[s._v("row-style")]),s._v(" method is now an object")])])])]),a("h2",{attrs:{id:""}},[a("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[s._v("¶")])]),a("p",[a("i",[a("sup",[s._v("*")]),s._v(" Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",{pre:!0},[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",{pre:!0},[s._v("message")]),s._v(" to user-provided content.")])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("GitHub Releases")])]),s._v("\n Changelog\n ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},e=[],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){"use strict";function l(s){a(675)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(677),n=a.n(e),r=a(678),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(676);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("f3a1ce7a",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".page-component__scroll{height:calc(100% - 80px);margin-top:80px}.page-component__scroll .el-scrollbar__wrap{overflow-x:auto}.page-component{box-sizing:border-box;height:100%}.page-component .page-component__nav{width:240px;position:fixed;top:0;bottom:0;margin-top:80px;transition:padding-top .3s}.page-component .page-component__nav .el-scrollbar__wrap{height:100%}.page-component .page-component__nav.is-extended{padding-top:0}.page-component .side-nav{height:100%;padding-top:50px;padding-bottom:50px;padding-right:0}.page-component .side-nav>ul{padding-bottom:50px}.page-component .page-component__content{padding-left:270px;padding-bottom:100px;box-sizing:border-box}.page-component .content{padding-top:50px}.page-component .content>h3{margin:55px 0 20px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #d8d8d8;padding:15px;max-width:250px}.page-component .content>table th{text-align:left;white-space:nowrap;color:#666;font-weight:400}.page-component .content>table td{color:#333}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .content>ul:not(.timeline){margin:10px 0;padding:0 0 0 20px;font-size:14px;color:#5e6d82;line-height:2em}.page-component .page-component-up{background-color:#fff;position:fixed;right:100px;bottom:150px;width:40px;height:40px;border-radius:20px;cursor:pointer;transition:.3s;box-shadow:0 0 6px rgba(0,0,0,.12);z-index:5}.page-component .page-component-up i{color:#409eff;display:block;line-height:40px;text-align:center;font-size:18px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{-ms-transform:translateY(-30px);transform:translateY(-30px);opacity:0}.page-component.page-container{padding:0}@media (max-width:768px){.page-component .page-component__nav{width:100%;position:static;margin-top:0}.page-component .side-nav{padding-top:0;padding-left:50px}.page-component .page-component__content{padding-left:10px;padding-right:10px}.page-component .content{padding-top:0}.page-component .content>table{overflow:auto;display:block}.page-component .page-component-up{display:none}}",""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s},n=a(113),r=l(n),v=a(79),_=l(v),c=a(78),i=l(c);t.default={data:function(){return{lang:this.$route.meta.lang,navsData:_.default,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null}},watch:{"$route.path":function(){var s=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){s.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var s=document.querySelectorAll("h2 a,h3 a"),t=location.href.split("#").splice(0,2).join("#");[].slice.call(s).forEach(function(s){var a=s.getAttribute("href");s.href=t+a})}},goAnchor:function(){var s=this;if(location.href.match(/#/g).length>1){var t=function(){var t=location.href.match(/#[^#]+$/g);if(!t)return{v:void 0};var a=document.querySelector(t[0]);if(!a)return{v:void 0};setTimeout(function(t){s.componentScrollBox.scrollTop=a.offsetTop},50)}();if("object"===(void 0===t?"undefined":e(t)))return t.v}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var s=this.componentScrollBox.scrollTop;this.showBackToTop=s>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>s&&(this.showHeader=this.scrollTop>s),0===s&&(this.showHeader=!0),this.navFaded||r.default.$emit("fadeNav"),this.scrollTop=s}},created:function(){var s=this;r.default.$on("navFade",function(t){s.navFaded=t}),window.addEventListener("hashchange",function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,s.renderAnchorHref()):s.goAnchor()})},mounted:function(){this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=(0,i.default)(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[a("div",{staticClass:"page-container page-component"},[a("el-scrollbar",{staticClass:"page-component__nav"},[a("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),a("div",{staticClass:"page-component__content"},[a("router-view",{staticClass:"content"}),a("footer-nav")],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:s.hover},on:{mouseenter:function(t){s.hover=!0},mouseleave:function(t){s.hover=!1},click:s.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)])},e=[],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){"use strict";function l(s){a(680)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(682),n=a(0),r=l,v=n(null,e.a,!1,r,"data-v-4191270f",null);t.default=v.exports},function(s,t,a){var l=a(681);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("02601d3d",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".cards[data-v-4191270f]{margin:30px 0 70px}.card[data-v-4191270f]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-4191270f]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-4191270f]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-4191270f]{font-size:14px;color:#99a9bf}",""])},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Design Disciplines")]),l("el-row",{staticClass:"cards",attrs:{gutter:14}},[l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(605),alt:"Consistency"}}),l("h4",[s._v("Consistency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(606),alt:"Feedback"}}),l("h4",[s._v("Feedback")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(607),alt:"Efficiency"}}),l("h4",[s._v("Efficiency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(608),alt:"Controllability"}}),l("h4",[s._v("Controllability")]),l("span")])])],1),l("h3",[s._v("Consistency")]),s._m(0),l("h3",[s._v("Feedback")]),s._m(1),l("h3",[s._v("Efficiency")]),s._m(2),l("h3",[s._v("Controllability")]),s._m(3)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Consistent with real life: ")]),s._v("in line with the process and logic of real life, and comply with languages and habits that the users are used to.")]),a("li",[a("strong",[s._v("Consistent within interface: ")]),s._v("all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Operation feedback: ")]),s._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),a("li",[a("strong",[s._v("Visual feedback: ")]),s._v("reflect current state by updating or rearranging elements of the page.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Simplify the process: ")]),s._v("keep operating process simple and intuitive.")]),a("li",[a("strong",[s._v("Definite and clear: ")]),s._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),a("li",[a("strong",[s._v("Easy to identify: ")]),s._v("the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Decision making: ")]),s._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),a("li",[a("strong",[s._v("Controlled consequences: ")]),s._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){"use strict";function l(s){a(684)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(686),n=a.n(e),r=a(687),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(685);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("32b80c51",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,'.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li strong{color:#5e6d82;font-weight:400}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}@media (max-width:768px){.page-guide .content{padding-left:0}}',""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},e=[],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){"use strict";function l(s){a(689)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(691),n=a.n(e),r=a(692),v=a(0),_=l,c=v(n.a,r.a,!1,_,"data-v-3b0474de",null);t.default=c.exports},function(s,t,a){var l=a(690);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("21e784a6",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,'.cards .container[data-v-3b0474de]:after{clear:both}.cards .container[data-v-3b0474de]:after,.cards .container[data-v-3b0474de]:before{display:table;content:""}.banner[data-v-3b0474de]{text-align:center}.banner-desc[data-v-3b0474de]{padding-top:20px}.banner-desc h1[data-v-3b0474de]{font-size:34px;margin:0;line-height:48px;color:#555}.banner-desc p[data-v-3b0474de]{font-size:18px;line-height:28px;color:#888;margin:10px 0 5px}.sponsors[data-v-3b0474de]{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sponsor[data-v-3b0474de]{margin:0 20px 50px;display:-ms-inline-flexbox;display:inline-flex;width:300px;height:100px;-ms-flex-pack:center;justify-content:center}.sponsor img[data-v-3b0474de]{margin-right:20px}.sponsor div[data-v-3b0474de]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.sponsor p[data-v-3b0474de]{margin:0;line-height:1.8;color:#999;font-size:14px}.jumbotron[data-v-3b0474de]{width:890px;height:465px;margin:30px auto;position:relative}.jumbotron div[data-v-3b0474de]{width:100%;height:100%;background-color:transparent;position:absolute;top:0;left:0}.jumbotron img[data-v-3b0474de]{position:absolute}.jumbotron .jumbotron-cloud-1[data-v-3b0474de]{right:0;top:0;height:55px}.jumbotron .jumbotron-plant-2[data-v-3b0474de]{left:60px;top:200px}.jumbotron .jumbotron-web[data-v-3b0474de]{height:385px;top:35px;left:110px}.jumbotron .jumbotron-cloud-2[data-v-3b0474de]{left:0;top:50px;height:55px}.jumbotron .jumbotron-compo-1[data-v-3b0474de]{left:94px;height:90px;top:220px}.jumbotron .jumbotron-compo-2[data-v-3b0474de]{right:73px;top:60px;height:124px}.jumbotron .jumbotron-compo-3[data-v-3b0474de]{right:42px;top:200px;height:120px}.jumbotron .jumbotron-plant-1[data-v-3b0474de]{bottom:0;left:30px;height:185px}.jumbotron .jumbotron-figure-1[data-v-3b0474de]{bottom:0;right:180px;height:140px}.jumbotron .jumbotron-figure-2[data-v-3b0474de]{bottom:0;right:10px;height:68px}.cards[data-v-3b0474de]{margin:0 auto 110px;width:1140px}.cards .container[data-v-3b0474de]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-3b0474de]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-3b0474de]{width:160px;height:120px}.card[data-v-3b0474de]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-3b0474de]{margin:66px auto 60px}.card h3[data-v-3b0474de]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-3b0474de]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:20px}.card a[data-v-3b0474de]{height:53px;line-height:52px;font-size:14px;color:#409eff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-3b0474de]:hover{color:#fff;background:#409eff}.card[data-v-3b0474de]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@media (max-width:1140px){.cards[data-v-3b0474de]{width:100%}.cards .container[data-v-3b0474de]{width:100%;margin:0}.banner .container[data-v-3b0474de]{width:100%;box-sizing:border-box}.banner img[data-v-3b0474de]{right:0}}@media (max-width:1000px){.banner .container img[data-v-3b0474de],.jumbotron[data-v-3b0474de]{display:none}}@media (max-width:768px){.cards li[data-v-3b0474de]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-3b0474de]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-3b0474de],.banner-stars[data-v-3b0474de]{display:none}.banner-desc h2[data-v-3b0474de]{font-size:32px}.banner-desc p[data-v-3b0474de]{width:auto}}',""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(609);t.default={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new l.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[s._m(0),s._m(1),l("div",{staticClass:"sponsors"},[l("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==s.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[l("img",{attrs:{width:"35px",src:a(114),alt:"tipe.io"}}),s._m(2)]),s._m(3)]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(610),alt:""}}),l("h3",[s._v("Guide")]),l("p",[s._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[s._v("View Detail\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(611),alt:""}}),l("h3",[s._v("Component")]),l("p",[s._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[s._v("View Detail\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(612),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)])])])])},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"banner"},[a("div",{staticClass:"banner-desc"},[a("h1",[s._v("A Desktop UI Library")]),a("p",[s._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])])])},function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"jumbotron"},[l("div",[l("img",{staticClass:"jumbotron-plant-2",attrs:{src:a(613),alt:""}}),l("img",{staticClass:"jumbotron-web",attrs:{src:a(614),alt:""}}),l("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(615),alt:""}}),l("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(616),alt:""}}),l("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(617),alt:""}})]),l("div",{attrs:{"data-hover-layer":"0"}},[l("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(618),alt:""}}),l("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(619),alt:""}})]),l("div",{attrs:{"data-hover-layer":"1"}},[l("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(620),alt:""}}),l("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(621),alt:""}}),l("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(622),alt:""}})])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[a("p",[s._v("Sponsored by Tipe.io")]),a("p",[s._v("Next Generation API-first CMS")])])},function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[l("img",{attrs:{width:"45px",src:a(115),alt:"tipe.io"}}),l("div",[l("p",[s._v("Sponsored by 多会")]),l("p",[s._v("炫酷的新一代活动票务系统")])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){"use strict";function l(s){a(694)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(696),n=a.n(e),r=a(697),v=a(0),_=l,c=v(n.a,r.a,!1,_,"data-v-77f359bc",null);t.default=c.exports},function(s,t,a){var l=a(695);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("694652b4",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,"h3[data-v-77f359bc]{margin-bottom:15px}.block[data-v-77f359bc]{margin-bottom:55px}p[data-v-77f359bc]{margin:0 0 15px}.nav-demos p[data-v-77f359bc]{margin-bottom:50px}.nav-demos h5[data-v-77f359bc]{margin:0}.nav-demos img[data-v-77f359bc]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-77f359bc]{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-77f359bc]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-77f359bc]{display:block;width:100%}.mask[data-v-77f359bc]{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-77f359bc],.zoom-leave-active[data-v-77f359bc]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-77f359bc],.zoom-leave-active[data-v-77f359bc]{-ms-transform:scale(.3);transform:scale(.3);opacity:0}.fade-enter-active[data-v-77f359bc],.fade-leave-active[data-v-77f359bc]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-77f359bc],.fade-leave-active[data-v-77f359bc]{opacity:0}",""])},function(s,t,a){"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={},e=document;l.left=(e.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){"use strict";var l=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(623),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(624),alt:"Level 2 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 2 categories")]),l("p",[s._v("Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.")]),l("img",{attrs:{src:a(625),alt:"Level 3 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 3 categories")]),l("p",[s._v("Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.")])])],1)],1),l("div",{staticClass:"block"},[l("h3",[s._v("Top Navigation")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._v("Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:a(626),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),l("p",[s._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._v("Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("Choose the right navigation")]),a("p",[s._v("An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation")])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){"use strict";function l(s){a(699)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(701),n=a(0),r=l,v=n(null,e.a,!1,r,"data-v-3b0011c2",null);t.default=v.exports},function(s,t,a){var l=a(700);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("3be909bb",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,'.cards .container[data-v-3b0011c2]:after{clear:both}.cards .container[data-v-3b0011c2]:after,.cards .container[data-v-3b0011c2]:before{display:table;content:""}.page-resource[data-v-3b0011c2]{padding-top:55px;box-sizing:border-box}.page-resource .resource-placeholder[data-v-3b0011c2]{margin:50px auto 100px;text-align:center}.page-resource .resource-placeholder img[data-v-3b0011c2]{width:150px}.page-resource .resource-placeholder h4[data-v-3b0011c2]{margin:20px 0 16px;font-size:16px;color:#1f2f3d;line-height:1}.page-resource .resource-placeholder p[data-v-3b0011c2]{margin:0;font-size:14px;color:#99a9bf;line-height:1}.cards[data-v-3b0011c2]{margin:35px auto 110px}.cards .container[data-v-3b0011c2]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-3b0011c2]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-3b0011c2]{font-size:28px;margin:0}p[data-v-3b0011c2]{font-size:14px;color:#5e6d82}.card[data-v-3b0011c2]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-3b0011c2]{margin:75px auto 35px;height:87px}.card h3[data-v-3b0011c2]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-3b0011c2]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.6}.card a[data-v-3b0011c2]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#409eff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-3b0011c2]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-3b0011c2]{height:auto;padding-bottom:20px}.cards h3[data-v-3b0011c2]{height:auto}}',""])},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"page-container page-resource"},[l("h2",[s._v("Resource")]),l("p",[s._v("More resources are being developed")]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(627),alt:""}}),l("h3",[s._v("Sketch Template")]),l("p",[s._v("Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[s._v("Download")])])])])])])}],n={render:l,staticRenderFns:e};t.a=n},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){s.exports=a(1006)},function(s,t,a){"use strict";function l(s){a(1007)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1009),n=a.n(e),r=a(1010),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1008);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("7fc45351",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-box.demo-alert .el-alert{margin:20px 0 0}.demo-box.demo-alert .el-alert:first-child{margin:0}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays important alert messages.")]),s._m(1),a("p",[s._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success"}}),a("el-alert",{attrs:{title:"info alert",type:"info"}}),a("el-alert",{attrs:{title:"warning alert",type:"warning"}}),a("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),a("p",[s._v("Alert provides 4 types of themes defined by "),a("code",[s._v("type")]),s._v(", whose default value is "),a("code",[s._v("info")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Customize the close button as texts or other symbols.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n hello() {\n alert('Hello World!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),a("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),a("code",[s._v("closable")]),s._v(" attribute decides if the component can be closed or not. It accepts "),a("code",[s._v("boolean")]),s._v(", and the default is "),a("code",[s._v("true")]),s._v(". You can set "),a("code",[s._v("close-text")]),s._v(" attribute to replace the default cross symbol as the close button. Be careful that "),a("code",[s._v("close-text")]),s._v(" must be a string. "),a("code",[s._v("close")]),s._v(" event fires when the component is closed.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"unclosable alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":closable")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"customized close-text"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("close-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Gotcha"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"alert with callback"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"hello"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n hello() {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Hello World!'")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displaying an icon improves readability.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2),a("p",[s._v("Setting the "),a("code",[s._v("show-icon")]),s._v(" attribute displays an icon that corresponds with the current Alert type.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Description includes a message with more detailed information.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2),a("p",[s._v("Besides the required "),a("code",[s._v("title")]),s._v(" attribute, you can add a "),a("code",[s._v("description")]),s._v(" attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"with description"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"This is a description."')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2),a("p",[s._v("At last, this is an example with both icon and description.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable-close-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable close button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"centered-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use the "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute to center the text.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon-and-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon and description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("title "),a("strong",[s._v("REQUIRED")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("component type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("descriptive text. Can also be passed with the default slot")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("if closable or not")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to center the text")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),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("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1012)},function(s,t,a){"use strict";function l(s){a(1013)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1015),n=a(0),r=l,v=n(null,e.a,!1,r,"data-v-9f226bfc",null);t.default=v.exports},function(s,t,a){var l=a(1014);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("3c224cee",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,'.clearfix[data-v-9f226bfc]:after{clear:both}.clearfix[data-v-9f226bfc]:after,.clearfix[data-v-9f226bfc]:before{display:table;content:""}.share-button[data-v-9f226bfc]{width:36px;padding:10px}.mark[data-v-9f226bfc]{margin-top:8px;line-height:1;float:right}.item[data-v-9f226bfc]{margin-right:40px}',""])},function(s,t,a){"use strict";var l=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:'\n comments\n\n\n replies\n\n\n\n \n Click Me\n \n \n \n comments\n \n \n \n replies\n \n \n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n comments\n "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n replies\n "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("The amount is defined with "),a("code",[s._v("value")]),s._v(" which accepts "),a("code",[s._v("Number")]),s._v(" or "),a("code",[s._v("String")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Click Me"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n comments\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" />")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n replies\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" />")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n"),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize the max value.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("The max value is defined by property "),a("code",[s._v("max")]),s._v(" which is a "),a("code",[s._v("Number")]),s._v(". Note that it only works when "),a("code",[s._v("value")]),s._v(" is also a "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"99"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n"),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displays text content other than numbers.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("When "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("String")]),s._v(", it can display customized text.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"new"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"hot"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n"),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Use a red dot to mark content that needs to be noticed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'query\n\n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("query")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("is-dot")]),s._v(". It is a "),a("code",[s._v("Boolean")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("query"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"share-button"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n"),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"max-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" Max value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"little-red-dot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Little red dot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("display value")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value, shows '{max}+' when exceeded. Only works if "),a("code",{pre:!0},[s._v("value")]),s._v(" is a "),a("code",{pre:!0},[s._v("Number")])]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("if a little dot is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("hidden badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1017)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1018),e=a(0),n=e(null,l.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays the location of the current page, making it easier to browser back.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n homepage\n promotion management\n promotion list\n promotion detail\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),a("el-breadcrumb-item",[s._v("promotion management")]),a("el-breadcrumb-item",[s._v("promotion list")]),a("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),a("p",[s._v("In "),a("code",[s._v("el-breadcrumb")]),s._v(", each "),a("code",[s._v("el-breadcrumb-item")]),s._v(" is a tag that stands for every level starting from homepage. This component has a "),a("code",[s._v("String")]),s._v(" attribute "),a("code",[s._v("separator")]),s._v(", and it determines the separator. Its default value is '/'.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"/"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":to")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n homepage\n promotion management\n promotion list\n promotion detail\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),a("el-breadcrumb-item",[s._v("promotion management")]),a("el-breadcrumb-item",[s._v("promotion list")]),a("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("separator-class")]),s._v(" to use "),a("code",[s._v("iconfont")]),s._v(" as the separator，it will cover "),a("code",[s._v("separator")])]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("separator-class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-right"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":to")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icon-separator"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-separator","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon separator")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("separator character")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("/")])]),a("tr",[a("td",[s._v("separator-class")]),a("td",[s._v("class name of icon separator")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("target route of the link, same as "),a("code",{pre:!0},[s._v("to")]),s._v(" of "),a("code",{pre:!0},[s._v("vue-router")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("if "),a("code",{pre:!0},[s._v("true")]),s._v(", the navigation will not leave a history record")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1020)},function(s,t,a){"use strict";function l(s){a(1021)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1023),n=a(0),r=l,v=n(null,e.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var l=a(1022);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("58068286",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-box.demo-button .el-row{margin-bottom:10px}.demo-box.demo-button .el-button+.el-button{margin-left:10px}.demo-box.demo-button .el-button-group{margin-bottom:20px}.demo-box.demo-button .el-button-group .el-button+.el-button{margin-left:0}.demo-box.demo-button .el-button-group+.el-button-group{margin-left:10px}",""])},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Commonly used button.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Plain\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Round\n Primary\n Success\n Info\n Warning\n Danger\n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-button",[s._v("Default")]),a("el-button",{attrs:{type:"primary"}},[s._v("Primary")]),a("el-button",{attrs:{type:"success"}},[s._v("Success")]),a("el-button",{attrs:{type:"info"}},[s._v("Info")]),a("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger"}},[s._v("Danger")])],1),a("div",{staticStyle:{margin:"20px 0"}},[a("el-button",{attrs:{plain:""}},[s._v("Plain")]),a("el-button",{attrs:{type:"primary",plain:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",plain:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",plain:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",plain:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",plain:""}},[s._v("Danger")])],1),a("div",[a("el-button",{attrs:{round:""}},[s._v("Round")]),a("el-button",{attrs:{type:"primary",round:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",round:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",round:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",round:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",round:""}},[s._v("Danger")])],1)]),a("p",[s._v("Use "),a("code",[s._v("type")]),s._v(", "),a("code",[s._v("plain")]),s._v(" and "),a("code",[s._v("round")]),s._v(" to define Button's style.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Primary"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 20px 0"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Plain"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Primary"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Danger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Round"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Primary"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Danger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Plain\n Primary\n Success\n Info\n Warning\n Danger\n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-button",{attrs:{disabled:""}},[s._v("Default")]),a("el-button",{attrs:{type:"primary",disabled:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",disabled:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",disabled:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",disabled:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",disabled:""}},[s._v("Danger")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{attrs:{plain:"",disabled:""}},[s._v("Plain")]),a("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",plain:"",disabled:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",plain:"",disabled:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[s._v("Danger")])],1)]),a("p",[s._v("Use "),a("code",[s._v("disabled")]),s._v(" attribute to determine whether a button is disabled. It accepts a "),a("code",[s._v("Boolean")]),s._v(" value.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Primary"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Danger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Plain"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Primary"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Danger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Buttons without border and background.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Text Button\nText Button\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"}},[s._v("Text Button")]),a("el-button",{attrs:{type:"text",disabled:""}},[s._v("Text Button")])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("Text Button"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\nUpload\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[s._v("Search")]),a("el-button",{attrs:{type:"primary"}},[s._v("Upload"),a("i",{staticClass:"el-icon-upload el-icon-right"})])],1),a("p",[s._v("Use the "),a("code",[s._v("icon")]),s._v(" attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an "),a("code",[s._v("")]),s._v(" tag. Custom icons can be used as well.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),s._v("Search"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Displayed as a button group, can be used to group a series of similar operations.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Previous Page\n Next Page\n\n\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[s._v("Previous Page")]),a("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),a("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1),a("p",[s._v("Use tag "),a("code",[s._v("")]),s._v(" to group your buttons.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-left"')]),s._v(">")]),s._v("Previous Page"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Next Page"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-right el-icon-right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Click the button to load data, then the button displays a loading state.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Loading\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"primary",loading:!0}},[s._v("Loading")])],1),a("p",[s._v("Set "),a("code",[s._v("loading")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to display loading state.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":loading")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("Loading"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Medium\n Small\n Mini\n
    \n
    \n Default\n Medium\n Small\n Mini\n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-button",[s._v("Default")]),a("el-button",{attrs:{size:"medium"}},[s._v("Medium")]),a("el-button",{attrs:{size:"small"}},[s._v("Small")]),a("el-button",{attrs:{size:"mini"}},[s._v("Mini")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{attrs:{round:""}},[s._v("Default")]),a("el-button",{attrs:{size:"medium",round:""}},[s._v("Medium")]),a("el-button",{attrs:{size:"small",round:""}},[s._v("Small")]),a("el-button",{attrs:{size:"mini",round:""}},[s._v("Mini")])],1)]),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("medium")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Medium"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Small"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("Mini"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Medium"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Small"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Mini"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute determines if the button is disabled.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"text-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Text Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icon-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button Group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("button size")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("button type")]),a("td",[s._v("string")]),a("td",[s._v("primary / success / warning / danger / info / text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("determine whether it's a plain button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("round")]),a("td",[s._v("determine whether it's a round button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("determine whether it's loading")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("disable the button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon class name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as native button's "),a("code",{pre:!0},[s._v("autofocus")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("same as native button's "),a("code",{pre:!0},[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("button / submit / reset")]),a("td",[s._v("button")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1025)},function(s,t,a){"use strict";function l(s){a(1026)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1028),n=a.n(e),r=a(1029),v=a(0),_=l,c=v(n.a,r.a,!1,_,"data-v-018beaf5",null);t.default=c.exports},function(s,t,a){var l=a(1027);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("949dfec2",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,'.clearfix[data-v-018beaf5]:after{clear:both}.clearfix[data-v-018beaf5]:after,.clearfix[data-v-018beaf5]:before{display:table;content:""}.text[data-v-018beaf5]{font-size:14px}.time[data-v-018beaf5]{font-size:13px;color:#999}.bottom[data-v-018beaf5]{margin-top:13px;line-height:12px}.item[data-v-018beaf5]{margin-bottom:18px}.button[data-v-018beaf5]{padding:0;float:right}.image[data-v-018beaf5]{width:100%;display:block}.box-card[data-v-018beaf5]{width:480px}',""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(112),e=function(s){return s&&s.__esModule?s:{default:s}}(l);t.default={data:function(){return{currentDate:e.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("section",[s._m(0),l("p",[s._v("Integrate information in a card container.")]),s._m(1),l("p",[s._v("Card includes title, content and operations.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n Card name\n Operation button\n
    \n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,style:'\n .text {\n font-size: 14px;\n }\n\n .item {\n margin-bottom: 18px;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n .clearfix:after {\n clear: both\n }\n\n .box-card {\n width: 480px;\n }\n'}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[l("span",[s._v("Card name")]),l("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[s._v("Operation button")])],1),s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("List item "+t)+"\n ")])})],2)],1),l("p",[s._v("Card is made up of "),l("code",[s._v("header")]),s._v(" and "),l("code",[s._v("body")]),s._v(". "),l("code",[s._v("header")]),s._v(" is optional, and its content distribution depends on a named slot.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"header"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Card name"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"float: right; padding: 3px 0"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("Operation button"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"o in 4"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"text item"')]),s._v(">")]),s._v("\n {{'List item ' + o }}\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),l("span",{attrs:{class:"css"}},[s._v("\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".text")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":before")]),s._v(",\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": table;\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("content")]),s._v(": "),l("span",{attrs:{class:"hljs-string"}},[s._v('""')]),s._v(";\n }\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("clear")]),s._v(": both\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".box-card")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("480px")]),s._v(";\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[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:'\n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,style:"\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .box-card {\n width: 480px;\n }\n"}}},[l("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"o in 4"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"text item"')]),s._v(">")]),s._v("\n {{'List item ' + o }}\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),l("span",{attrs:{class:"css"}},[s._v("\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".text")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(" "),l("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".box-card")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("480px")]),s._v(";\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[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:'\n \n \n \n
    \n Yummy hamburger\n
    \n \n Operating button\n
    \n
    \n     \n     \n    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n currentDate: new Date()\n };\n }\n}\n",style:'\n .time {\n font-size: 13px;\n color: #999;\n }\n \n .bottom {\n margin-top: 13px;\n line-height: 12px;\n }\n\n .button {\n padding: 0;\n float: right;\n }\n\n .image {\n width: 100%;\n display: block;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n \n .clearfix:after {\n clear: both\n }\n'}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-row",s._l(2,function(t,e){return l("el-col",{key:t,attrs:{span:8,offset:e>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:a(628)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("Yummy hamburger")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("Operating button")])],1)])])],1)}))],1),l("p",[s._v("The "),l("code",[s._v("body-style")]),s._v(" attribute defines CSS style of custom "),l("code",[s._v("body")]),s._v(". This example also uses "),l("code",[s._v("el-col")]),s._v(" for layout.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"(o, index) in 2"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":body-style")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"image"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Yummy hamburger"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("time")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"time"')]),s._v(">")]),s._v("{{ currentDate }}"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"button"')]),s._v(">")]),s._v("Operating button"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),l("span",{attrs:{class:"css"}},[s._v("\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".time")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("13px")]),s._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("#999")]),s._v(";\n }\n \n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bottom")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("13px")]),s._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".button")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("float")]),s._v(": right;\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".image")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":before")]),s._v(",\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": table;\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("content")]),s._v(": "),l("span",{attrs:{class:"hljs-string"}},[s._v('""')]),s._v(";\n }\n \n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("clear")]),s._v(": both\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),l("span",{attrs:{class:"javascript"}},[s._v("\n"),l("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),l("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[s._v("currentDate")]),s._v(": "),l("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),l("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("()\n };\n }\n}\n")]),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"simple-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-images"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[s._v("¶")]),s._v(" With images")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("Title of the card. Also accepts a DOM passed by "),a("code",{pre:!0},[s._v("slot#header")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("CSS style of body")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1031)},function(s,t,a){"use strict";function l(s){a(1032)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1034),n=a.n(e),r=a(1035),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1033);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("50d11a94",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-carousel .el-carousel__item:nth-child(2n+1){background-color:#d3dce6}.demo-carousel .block{padding:30px;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-carousel .block:last-child{border-right:none}.demo-carousel .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-carousel .el-carousel__container{text-align:center}.demo-carousel .el-carousel__item h3{color:#fff;font-size:18px;line-height:300px;margin:0}.demo-carousel .el-carousel__item:nth-child(2n){background-color:#99a9bf}.demo-carousel .small h3{font-size:14px;line-height:150px}.demo-carousel .medium h3{font-size:14px;line-height:200px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Loop a series of images or texts in a limited space")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 150px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is hovered (default)")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is clicked")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("Combine "),a("code",[s._v("el-carousel")]),s._v(" with "),a("code",[s._v("el-carousel-item")]),s._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside "),a("code",[s._v("el-carousel-item")]),s._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),a("code",[s._v("trigger")]),s._v(" to "),a("code",[s._v("click")]),s._v(", and the carousel switches only when an indicator is clicked.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is hovered (default)"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is clicked"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("150px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Indicators can be displayed outside the carousel")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("indicator-position")]),s._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("outside")]),s._v(" moves them outside; setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("none")]),s._v(" hides the indicators.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("indicator-position")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"outside"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("300px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can define when arrows are displayed")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("arrow")]),s._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),a("code",[s._v("arrow")]),s._v(" to "),a("code",[s._v("always")]),s._v(" or "),a("code",[s._v("never")]),s._v(" shows/hides the arrows permanently.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":interval")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"5000"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("arrow")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"always"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("300px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[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:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 200px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":interval")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4000"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in 6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indicators"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indicators")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arrows"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arrows")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the carousel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("index of the initially active slide (starting from 0)")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how indicators are triggered")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("whether automatically loop the slides")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("interval of the auto loop, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("position of the indicators")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("when arrows are shown")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the Carousel")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the active slide switches")]),a("td",[s._v("index of the new active slide, index of the old active slide")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("manually switch slide")]),a("td",[s._v("index of the slide to be switched to, starting from 0; or the "),a("code",{pre:!0},[s._v("name")]),s._v(" of corresponding "),a("code",{pre:!0},[s._v("el-carousel-item")])])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("switch to the previous slide")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("switch to the next slide")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("name of the item, can be used in "),a("code",{pre:!0},[s._v("setActiveItem")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("text content for the corresponding indicator")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1037)},function(s,t,a){"use strict";function l(s){a(1038)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1040),n=a.n(e),r=a(1041),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1039);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("6c518f03",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-cascader .block:last-child{border-right:none}.demo-cascader .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"},options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["component","data","tag"]}},created:function(){this.optionsWithDisabled=JSON.parse(JSON.stringify(this.options)),this.optionsWithDisabled[0].disabled=!0},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[s.length-1].style.padding="0"})},methods:{handleItemChange:function(s){var t=this;console.log("active item:",s),setTimeout(function(a){s.indexOf("California")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"Los Angeles"}]:s.indexOf("Florida")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"Orlando"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),s._m(1),a("p",[s._v("There are two ways to expand child option items.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Child options expand when clicked (default)\n \n \n
    \n
    \n Child options expand when hovered\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions: [],\n selectedOptions2: []\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when clicked (default)")]),a("el-cascader",{attrs:{options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions,callback:function(t){s.selectedOptions=t},expression:"selectedOptions"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when hovered")]),a("el-cascader",{attrs:{"expand-trigger":"hover",options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions2,callback:function(t){s.selectedOptions2=t},expression:"selectedOptions2"}})],1)]),a("p",[s._v("Assigning the "),a("code",[s._v("options")]),s._v(" attribute to an array of options renders a Cascader. The "),a("code",[s._v("expand-trigger")]),s._v(" attribute defines how child options are expanded. This example also demonstrates the "),a("code",[s._v("change")]),s._v(" event, whose parameter is the value of Cascader, an array made up of the values of each selected level.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when clicked (default)"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedOptions"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when hovered"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("expand-trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedOptions2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedOptions")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedOptions2")]),s._v(": []\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n optionsWithDisabled: [{\n value: 'guide',\n label: 'Guide',\n disabled: true,\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),a("p",[s._v("In this example, the first item in "),a("code",[s._v("options")]),s._v(" array has a "),a("code",[s._v("disabled: true")]),s._v(" field, so it is disabled. By default, Cascader checks the "),a("code",[s._v("disabled")]),s._v(" field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the "),a("code",[s._v("props")]),s._v(" attribute (see the API table below for details). And of course, field name "),a("code",[s._v("value")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("children")]),s._v(" can also be customized in the same way.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("optionsWithDisabled")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("The input can display only the last level instead of all levels.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("The "),a("code",[s._v("show-all-levels")]),s._v(" attribute defines if all levels are displayed. If it is "),a("code",[s._v("false")]),s._v(", only the last level is displayed.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":show-all-levels")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions3: ['component', 'data', 'tag']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(t){s.selectedOptions3=t},expression:"selectedOptions3"}})],1),a("p",[s._v("The default value can be defined with an array.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedOptions3")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v("]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[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:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),a("p",[s._v("By default only the options in the last level can be selected. By assigning "),a("code",[s._v("change-on-select")]),s._v(" to "),a("code",[s._v("true")]),s._v(", options in parent levels can also be selected.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("change-on-select")]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Load child options when their parent option is clicked or hovered over.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n label: 'California',\n cities: []\n }, {\n label: 'Florida',\n cities: []\n }],\n props: {\n value: 'label',\n children: 'cities'\n }\n };\n },\n\n methods: {\n handleItemChange(val) {\n console.log('active item:', val);\n setTimeout(_ => {\n if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n this.options2[0].cities = [{\n label: 'Los Angeles'\n }];\n } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n this.options2[1].cities = [{\n label: 'Orlando'\n }];\n }\n }, 300);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),a("p",[s._v("In this example, the options array does not have data of cities when initialized. With the "),a("code",[s._v("active-item-change")]),s._v(" event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how "),a("code",[s._v("props")]),s._v(" is used.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@active-item-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleItemChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": []\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": []\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cities'")]),s._v("\n }\n };\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleItemChange(val) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'active item:'")]),s._v(", val);\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (val.indexOf("),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(") > "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(" && !"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].cities.length) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].cities = [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v("\n }];\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (val.indexOf("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(") > "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(" && !"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("].cities.length) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("].cities = [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Orlando'")]),s._v("\n }];\n }\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("300")]),s._v(");\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[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:'
    \n Only options of the last level can be selected\n \n
    \n
    \n Options of all levels can be selected\n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Only options of the last level can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:""}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Options of all levels can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:"","change-on-select":""}})],1)]),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-cascader")]),s._v(" enables filtering")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Only options of the last level can be selected"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Try searching: Guide"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Options of all levels can be selected"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Try searching: Guide"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("change-on-select")]),s._v("\n >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Disable an option by setting a "),a("code",{pre:!0},[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("separator")]),a("td",[s._v("option separator")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("/")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("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 milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("whether selecting an option of any level is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-filter")]),a("td",[s._v("hook function before filtering with the value to be filtered as its parameter. If "),a("code",{pre:!0},[s._v("false")]),s._v(" is returned or a "),a("code",{pre:!0},[s._v("Promise")]),s._v(" is returned and then is rejected, filtering will be aborted")]),a("td",[s._v("function(value)")]),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:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of option object is used as the option's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("specify which key of option object is used as the option's value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which key of option object is used as the option's child options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of option object indicates if the option is disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("active-item-change")]),a("td",[s._v("triggers when active option changes, only works when "),a("code",{pre:!0},[s._v("change-on-select")]),s._v(" is "),a("code",{pre:!0},[s._v("false")])]),a("td",[s._v("an array of active options")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Cascader blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Cascader focuses")]),a("td",[s._v("(event: Event)")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1043)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1044),e=a.n(l),n=a(1045),r=a(0),v=r(e.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";var l=["Shanghai","Beijing","Guangzhou","Shenzhen"];s.exports={data:function(){return{checkList:["selected and disabled","Option A"],checked:!0,checked1:!1,checked2:!0,checked3:!0,checked4:!1,checked5:!1,checked6:!0,isValid:"valid",checkAll:!1,cities:l,checkedCities:["Shanghai","Beijing"],checkedCities1:["Shanghai","Beijing"],isIndeterminate:!0,checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],checkboxGroup5:[],checkboxGroup6:[]}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s?l:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){var t=s.length;this.checkAll=t===this.cities.length,this.isIndeterminate=t>0&&t\n \x3c!-- `checked` should be true or false --\x3e\n Option\n\n\n',script:"\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{model:{value:s.checked,callback:function(t){s.checked=t},expression:"checked"}},[s._v("Option")])]],2),a("p",[s._v("Define "),a("code",[s._v("v-model")]),s._v("(bind variable) in "),a("code",[s._v("el-checkbox")]),s._v(". The default value is a "),a("code",[s._v("Boolean")]),s._v(" for single "),a("code",[s._v("checkbox")]),s._v(", and it becomes "),a("code",[s._v("true")]),s._v(" when selected. Content inside the "),a("code",[s._v("el-checkbox")]),s._v(" tag will become the description following the button of the checkbox.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- `checked` should be true or false --\x3e")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked"')]),s._v(">")]),s._v("Option"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Disabled state for checkbox.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(t){s.checked1=t},expression:"checked1"}},[s._v("Option")]),a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(t){s.checked2=t},expression:"checked2"}},[s._v("Option")])]],2),a("p",[s._v("Set the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked1")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n checkList: ['selected and disabled','Option A']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox-group",{model:{value:s.checkList,callback:function(t){s.checkList=t},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"Option A"}}),a("el-checkbox",{attrs:{label:"Option B"}}),a("el-checkbox",{attrs:{label:"Option C"}}),a("el-checkbox",{attrs:{label:"disabled",disabled:""}}),a("el-checkbox",{attrs:{label:"selected and disabled",disabled:""}})],1)]],2),a("p",[a("code",[s._v("checkbox-group")]),s._v(" element can manage multiple checkboxes in one group by using "),a("code",[s._v("v-model")]),s._v(" which is bound as an "),a("code",[s._v("Array")]),s._v(". Inside the "),a("code",[s._v("el-checkbox")]),s._v(" element, "),a("code",[s._v("label")]),s._v(" is the value of the checkbox. If no content is nested in that tag, "),a("code",[s._v("label")]),s._v(" will be rendered as the description following the button of the checkbox. "),a("code",[s._v("label")]),s._v(" also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkList"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option A"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option B"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option C"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selected and disabled"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkList")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'selected and disabled'")]),s._v(","),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option A'")]),s._v("]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkAll: false,\n checkedCities: ['Shanghai', 'Beijing'],\n cities: cityOptions,\n isIndeterminate: true\n };\n },\n methods: {\n handleCheckAllChange(val) {\n this.checkedCities = val ? cityOptions : [];\n this.isIndeterminate = false;\n },\n handleCheckedCitiesChange(value) {\n let checkedCount = value.length;\n this.checkAll = checkedCount === this.cities.length;\n this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{attrs:{indeterminate:s.isIndeterminate},on:{change:s.handleCheckAllChange},model:{value:s.checkAll,callback:function(t){s.checkAll=t},expression:"checkAll"}},[s._v("Check all")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{on:{change:s.handleCheckedCitiesChange},model:{value:s.checkedCities,callback:function(t){s.checkedCities=t},expression:"checkedCities"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":indeterminate")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkAll"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("Check all"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkedCities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkAll")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkedCities")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("isIndeterminate")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCheckAllChange(val) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".checkedCities = val ? cityOptions : [];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n },\n handleCheckedCitiesChange(value) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" checkedCount = value.length;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cities.length;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(" && checkedCount < "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cities.length;\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkedCities1: ['Shanghai', 'Beijing'],\n cities: cityOptions\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:s.checkedCities1,callback:function(t){s.checkedCities1=t},expression:"checkedCities1"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" \n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkedCities1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkedCities1")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Checkbox with button styles.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n export default {\n data () {\n return {\n checkboxGroup1: ['Shanghai'],\n checkboxGroup2: ['Shanghai'],\n checkboxGroup3: ['Shanghai'],\n checkboxGroup4: ['Shanghai'],\n cities: cityOptions\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(t){s.checkboxGroup1=t},expression:"checkboxGroup1"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"medium"},model:{value:s.checkboxGroup2,callback:function(t){s.checkboxGroup2=t},expression:"checkboxGroup2"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup3,callback:function(t){s.checkboxGroup3=t},expression:"checkboxGroup3"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t,disabled:"Beijing"===t}},[s._v(s._s(t))])}))],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup4,callback:function(t){s.checkboxGroup4=t},expression:"checkboxGroup4"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))],1)]],2),a("p",[s._v("You just need to change "),a("code",[s._v("el-checkbox")]),s._v(" element into "),a("code",[s._v("el-checkbox-button")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"city === 'Beijing'\"")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup1")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup2")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup3")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup4")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n checked3: true,\n checked4: false,\n checked5: false,\n checked6: true,\n checkboxGroup5: [],\n checkboxGroup6: []\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-checkbox",{attrs:{label:"Option1",border:""},model:{value:s.checked3,callback:function(t){s.checked3=t},expression:"checked3"}}),a("el-checkbox",{attrs:{label:"Option2",border:""},model:{value:s.checked4,callback:function(t){s.checked4=t},expression:"checked4"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox",{attrs:{label:"Option1",border:"",size:"medium"},model:{value:s.checked5,callback:function(t){s.checked5=t},expression:"checked5"}}),a("el-checkbox",{attrs:{label:"Option2",border:"",size:"medium"},model:{value:s.checked6,callback:function(t){s.checked6=t},expression:"checked6"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup5,callback:function(t){s.checkboxGroup5=t},expression:"checkboxGroup5"}},[a("el-checkbox",{attrs:{label:"Option1",border:""}}),a("el-checkbox",{attrs:{label:"Option2",border:"",disabled:""}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup6,callback:function(t){s.checkboxGroup6=t},expression:"checkboxGroup6"}},[a("el-checkbox",{attrs:{label:"Option1",border:""}}),a("el-checkbox",{attrs:{label:"Option2",border:""}})],1)],1)]],2),a("p",[s._v("The "),a("code",[s._v("border")]),s._v(" attribute adds a border to Checkboxes.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked5"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup5"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked3")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked4")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked5")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked6")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup5")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup6")]),s._v(": []\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-state"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled State")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indeterminate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",{pre:!0},[s._v("indeterminate")]),s._v(" property can help you to achieve a 'check all' effect.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"minimum-maximum-items-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Minimum / Maximum items checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",{pre:!0},[s._v("min")]),s._v(" and "),a("code",{pre:!0},[s._v("max")]),s._v(" properties can help you to limit the number of checked items.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-borders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[s._v("¶")]),s._v(" With borders")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("value of the Checkbox when used inside a "),a("code",{pre:!0},[s._v("checkbox-group")])]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("value of the Checkbox if it's checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("value of the Checkbox if it's not checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the Checkbox is disabled")]),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 to add a border around Checkbox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the Checkbox, only works when "),a("code",{pre:!0},[s._v("border")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("if the Checkbox is checked")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("indeterminate")]),s._v(" in native checkbox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("the updated value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of checkbox buttons or bordered checkboxes")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the nesting checkboxes are disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("the updated value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("value of the checkbox when used inside a "),a("code",{pre:!0},[s._v("checkbox-group")])]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("value of the checkbox if it's checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("value of the checkbox if it's not checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the checkbox is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("if the checkbox is checked")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1047)},function(s,t,a){"use strict";function l(s){a(1048)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1050),n=a.n(e),r=a(1051),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1049);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("596f2e90",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Collapse to store contents.")]),s._m(1),a("p",[s._v("You can expand multiple panels")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeNames: ['1']\n };\n },\n methods: {\n handleChange(val) {\n console.log(val);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(t){s.activeNames=t},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"activeNames"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Consistency"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"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",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeNames")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("]\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(val) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(val);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In accordion mode, only one panel can be expanded at once")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeName: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("p",[s._v("Activate accordion mode using the "),a("code",[s._v("accordion")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"activeName"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Consistency"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"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",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("\n Consistency"),a("i",{staticClass:"header-icon el-icon-info"})]),a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n Consistency"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"header-icon el-icon-info"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"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",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom title")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Besides using the "),a("code",{pre:!0},[s._v("title")]),s._v(" attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether to activate accordion mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("currently active panel")]),a("td",[s._v("string (accordion mode)/array (non-accordion mode)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when active panels change")]),a("td",[s._v("activeNames: array (non-accordion mode)/string (accordion mode)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("unique identification of the panel")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the panel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1053)},function(s,t,a){"use strict";function l(s){a(1054)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1056),n=a.n(e),r=a(1057),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1055);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("383af4cc",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-color-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-color-picker .block:last-child{border-right:none}.demo-color-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-color-picker .el-color-picker+.el-color-picker{margin-left:20px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{color1:"#409EFF",color2:null,color3:"rgba(19, 206, 102, 0.8)",color4:"#409EFF"}},mounted:function(){this.$nextTick(function(){document.querySelectorAll(".source")[0].style.padding="0"})}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("ColorPicker is a color selector supporting multiple color formats.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n With default value\n \n
    \n
    \n With no default value\n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n color1: '#409EFF',\n color2: null\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With default value")]),a("el-color-picker",{model:{value:s.color1,callback:function(t){s.color1=t},expression:"color1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With no default value")]),a("el-color-picker",{model:{value:s.color2,callback:function(t){s.color2=t},expression:"color2"}})],1)]),a("p",[s._v("ColorPicker requires a string typed variable to be bound to v-model.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With default value"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With no default value"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#409EFF'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n color3: 'rgba(19, 206, 102, 0.8)'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(t){s.color3=t},expression:"color3"}})],1),a("p",[s._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),a("code",[s._v("show-alpha")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-alpha")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n color4: '#409EFF'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-color-picker",{model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}}),a("el-color-picker",{attrs:{size:"medium"},model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}}),a("el-color-picker",{attrs:{size:"small"},model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}}),a("el-color-picker",{attrs:{size:"mini"},model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#409EFF'")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alpha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alpha")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable the ColorPicker")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of ColorPicker")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("medium / small / mini")])]),a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("whether to display the alpha slider")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("color format of v-model")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for ColorPicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("color value")])]),a("tr",[a("td",[s._v("active-change")]),a("td",[s._v("triggers when the current active color changes")]),a("td",[s._v("active color value")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1059)},function(s,t,a){"use strict";function l(s){a(1060)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1062),n=a(0),r=l,v=n(null,e.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var l=a(1061);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("501f1965",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,'.demo-color-box{border-radius:4px;padding:20px;height:74px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-group .demo-color-box{border-radius:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-blue{background-color:#409eff}.bg-success{background-color:#13ce66}.bg-warning{background-color:#f7ba2a}.bg-danger{background-color:#ff4949}.bg-info{background-color:#909399}.bg-text-primary{background-color:#303133}.bg-text-regular{background-color:#606266}.bg-text-secondary{background-color:#909399}.bg-text-placeholder{background-color:#c0c4cc}.bg-border-base{background-color:#dcdfe6}.bg-border-light{background-color:#e4e7ed}.bg-border-lighter{background-color:#ebeef5}.bg-border-extra-light{background-color:#f2f6fc}[class*=" bg-border-"]{color:#303133}',""])},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),s._m(1),a("p",[s._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#409EFF")])])])],1),s._m(2),a("p",[s._v("Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#67C23A")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#E6A23C")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#F56C6C")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Info"),a("div",{staticClass:"value"},[s._v("#909399")])])])],1),s._m(3),a("p",[s._v("Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-text-primary"},[s._v("Primary Text"),a("div",{staticClass:"value"},[s._v("#303133")])]),a("div",{staticClass:"demo-color-box bg-text-regular"},[s._v("Regular Text"),a("div",{staticClass:"value"},[s._v("#606266")])]),a("div",{staticClass:"demo-color-box bg-text-secondary"},[s._v("Secondary Text"),a("div",{staticClass:"value"},[s._v("#909399")])]),a("div",{staticClass:"demo-color-box bg-text-placeholder"},[s._v("Placeholder Text"),a("div",{staticClass:"value"},[s._v("#C0C4CC")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-border-base"},[s._v("Base Border"),a("div",{staticClass:"value"},[s._v("#DCDFE6")])]),a("div",{staticClass:"demo-color-box bg-border-light"},[s._v("Light Border"),a("div",{staticClass:"value"},[s._v("#E4E7ED")])]),a("div",{staticClass:"demo-color-box bg-border-lighter"},[s._v("Lighter Border"),a("div",{staticClass:"value"},[s._v("#EBEEF5")])]),a("div",{staticClass:"demo-color-box bg-border-extra-light"},[s._v("Extra Light Border"),a("div",{staticClass:"value"},[s._v("#F2F6FC")])])])])],1)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"main-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Main Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"secondary-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Secondary Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"neutral-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Neutral Color")])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1064)},function(s,t,a){"use strict";function l(s){a(1065)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1067),n=a.n(e),r=a(1068),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1066);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("5ad3cacc",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,"#common-layouts+.demo-container>.source>.el-container:nth-child(7) .el-aside{line-height:320px}.el-footer,.el-header{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside{color:#333}#common-layouts+.demo-container .el-footer,#common-layouts+.demo-container .el-header{text-align:center}#common-layouts+.demo-container .el-aside{background-color:#d3dce6;text-align:center;line-height:200px}#common-layouts+.demo-container .el-main{background-color:#e9eef3;color:#333;text-align:center;line-height:160px}#common-layouts+.demo-container>.source>.el-container{margin-bottom:40px}#common-layouts+.demo-container>.source>.el-container:nth-child(5) .el-aside,#common-layouts+.demo-container>.source>.el-container:nth-child(6) .el-aside{line-height:260px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){var s={date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"};return{tableData:Array(20).fill(s)}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Container components for scaffolding basic structure of the page:")]),s._m(1),s._m(2),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Header\n Main\n\n\n\n Header\n Main\n Footer\n\n\n\n Aside\n Main\n\n\n\n Header\n \n Aside\n Main\n \n\n\n\n Header\n \n Aside\n \n Main\n Footer\n \n \n\n\n\n Aside\n \n Header\n Main\n \n\n\n\n Aside\n \n Header\n Main\n Footer\n \n\n\n\n',script:null,style:"\n .el-header, .el-footer {\n background-color: #B3C0D1;\n color: #333;\n text-align: center;\n line-height: 60px;\n }\n \n .el-aside {\n background-color: #D3DCE6;\n color: #333;\n text-align: center;\n line-height: 200px;\n }\n \n .el-main {\n background-color: #E9EEF3;\n color: #333;\n text-align: center;\n line-height: 160px;\n }\n \n body > .el-container {\n margin-bottom: 40px;\n }\n \n .el-container:nth-child(5) .el-aside,\n .el-container:nth-child(6) .el-aside {\n line-height: 260px;\n }\n \n .el-container:nth-child(7) .el-aside {\n line-height: 320px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")])],1),a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")]),a("el-footer",[s._v("Footer")])],1),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-main",[s._v("Main")])],1),a("el-container",[a("el-header",[s._v("Header")]),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-main",[s._v("Main")])],1)],1),a("el-container",[a("el-header",[s._v("Header")]),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-container",[a("el-main",[s._v("Main")]),a("el-footer",[s._v("Footer")])],1)],1)],1),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")])],1)],1),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")]),a("el-footer",[s._v("Footer")])],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-header")]),s._v(", "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-footer")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#B3C0D1")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("60px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#D3DCE6")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-main")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#E9EEF3")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("160px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(" > "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(5)")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(",\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(6)")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("260px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(7)")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("320px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n \n \n \n \n View\n Add\n Delete\n \n \n Tom\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n\n',script:"\n export default {\n data() {\n const item = {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n };\n return {\n tableData: Array(20).fill(item)\n }\n }\n };\n",style:"\n .el-header {\n background-color: #B3C0D1;\n color: #333;\n line-height: 60px;\n }\n \n .el-aside {\n color: #333;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[a("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[a("el-menu",{attrs:{"default-openeds":["1","3"]}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item-group",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Group 1")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("Option 1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("Option 2")])],2),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("Option 3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Option4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("Option 4-1")])],2)],2),a("el-submenu",{attrs:{index:"2"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-menu"}),s._v("Navigator Two")]),a("el-menu-item-group",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Group 1")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("Option 1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("Option 2")])],2),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"2-3"}},[s._v("Option 3")])],1),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Option 4")]),a("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("Option 4-1")])],2)],2),a("el-submenu",{attrs:{index:"3"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-setting"}),s._v("Navigator Three")]),a("el-menu-item-group",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Group 1")]),a("el-menu-item",{attrs:{index:"3-1"}},[s._v("Option 1")]),a("el-menu-item",{attrs:{index:"3-2"}},[s._v("Option 2")])],2),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"3-3"}},[s._v("Option 3")])],1),a("el-submenu",{attrs:{index:"3-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Option 4")]),a("el-menu-item",{attrs:{index:"3-4-1"}},[s._v("Option 4-1")])],2)],2)],1)],1),a("el-container",[a("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[a("el-dropdown",[a("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("View")]),a("el-dropdown-item",[s._v("Add")]),a("el-dropdown-item",[s._v("Delete")])],1)],1),a("span",[s._v("Tom")])],1),a("el-main",[a("el-table",{attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"height: 500px; border: 1px solid #eee"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"background-color: rgb(238, 241, 246)"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-openeds")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['1', '3']\"")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("Navigator One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("Option 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("Option 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("Option 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("Option 4-1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("Navigator Two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("Option 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("Option 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("Option 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("Option 4-1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("Navigator Three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3-1"')]),s._v(">")]),s._v("Option 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3-2"')]),s._v(">")]),s._v("Option 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3-3"')]),s._v(">")]),s._v("Option 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3-4-1"')]),s._v(">")]),s._v("Option 4-1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text-align: right; font-size: 12px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-right: 15px"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("View"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Add"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Delete"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Tom"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"140"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-header")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#B3C0D1")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("60px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" item = {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Array")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("20")]),s._v(").fill(item)\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"container"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#container","aria-hidden":"true"}},[s._v("¶")]),s._v(" Container")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("")]),s._v(": wrapper container. When nested with a "),a("code",{pre:!0},[s._v("")]),s._v(" or "),a("code",{pre:!0},[s._v("")]),s._v(", all its child elements will be vertically arranged. Otherwise horizontally.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("")]),s._v(": container for headers.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("")]),s._v(": container for side sections (usually a side nav).")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("")]),s._v(": container for main sections.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("")]),s._v(": container for footers.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("These components use flex for layout, so please make sure your browser supports it. Besides, "),a("code",{pre:!0},[s._v("")]),s._v("'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a "),a("code",{pre:!0},[s._v("")]),s._v(".")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"common-layouts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#common-layouts","aria-hidden":"true"}},[s._v("¶")]),s._v(" Common layouts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[s._v("¶")]),s._v(" Example")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"container-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Container Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("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("direction")]),a("td",[s._v("layout direction for child elements")]),a("td",[s._v("string")]),a("td",[s._v("horizontal / vertical")]),a("td",[s._v("vertical when nested with "),a("code",{pre:!0},[s._v("el-header")]),s._v(" or "),a("code",{pre:!0},[s._v("el-footer")]),s._v("; horizontal otherwise")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"header-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Header Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the header")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("60px")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"aside-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Aside Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("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("width")]),a("td",[s._v("width of the side section")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("300px")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"footer-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Footer Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the footer")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("60px")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1070)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1071),e=a(0),n=e(null,l.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom theme")]),a("p",[s._v("Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.")]),a("h3",{attrs:{id:"changing-theme-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changing theme color")]),a("p",[s._v("If you just want to change the theme color of Element, the "),a("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[s._v("theme preview website")]),s._v(" is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.")]),a("p",[s._v("The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).")]),a("h3",{attrs:{id:"update-scss-variables-in-your-project"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#update-scss-variables-in-your-project","aria-hidden":"true"}},[s._v("¶")]),s._v(" Update SCSS variables in your project")]),a("p",[a("code",{pre:!0},[s._v("theme-chalk")]),s._v(" is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v(":")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[s._v("/* theme color */\n$--color-primary: teal;\n\n/* icon font path, required */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),a("p",[s._v("Then in the entry file of your project, import this style file instead of Element's built CSS:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-JS"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'./element-variables.scss'")]),s._v("\n\nVue.use(Element)\n")])]),a("div",{staticClass:"tip"},[a("p",[s._v("Note that it is required to override icon font path to the relative path of Element's font files.")])]),a("h3",{attrs:{id:"cli-theme-tool"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cli-theme-tool","aria-hidden":"true"}},[s._v("¶")]),s._v(" CLI theme tool")]),a("p",[s._v("If you project doesn't use SCSS, you can customize themes with our CLI theme tool:")]),a("h4",{attrs:{id:"install"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#install","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("Install")])]),a("p",[s._v("First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("Then install the chalk theme from npm or GitHub.")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("# from npm\nnpm i element-theme-chalk -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),a("h4",{attrs:{id:"initialize-variable-file"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("Initialize variable file")])]),a("p",[s._v("After successfully installing the above packages, a command named "),a("code",{pre:!0},[s._v("et")]),s._v(" is available in CLI (if the packages are installed locally, use "),a("code",{pre:!0},[s._v("node_modules/.bin/et")]),s._v(" instead). Run "),a("code",{pre:!0},[s._v("-i")]),s._v(" to initialize the variable file which outputs to "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v(" by default. And you can specify its output directory as you will.")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),a("p",[s._v("In "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v(" you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-css"}},[s._v("$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-id"}},[s._v("#409EFF")]),s._v(" !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-1")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 10%) !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* 53a8ff */")]),s._v("\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-2")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 20%) !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* 66b1ff */")]),s._v("\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-3")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 30%) !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* 79bbff */")]),s._v("\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-4")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 40%) !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* 8cc5ff */")]),s._v("\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-5")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 50%) !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* a0cfff */")]),s._v("\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-6")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 60%) !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* b3d8ff */")]),s._v("\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-7")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 70%) !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* c6e2ff */")]),s._v("\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-8")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 80%) !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* d9ecff */")]),s._v("\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-9")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 90%) !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* ecf5ff */")]),s._v("\n\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-success")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-id"}},[s._v("#67c23a")]),s._v(" !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-warning")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-id"}},[s._v("#e6a23c")]),s._v(" !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-danger")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-id"}},[s._v("#f56c6c")]),s._v(" !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-info")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-id"}},[s._v("#909399")]),s._v(" !"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n\n...\n")])]),a("h4",{attrs:{id:"modify-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("Modify variables")])]),a("p",[s._v("Just edit "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v(", e.g. changing the theme color to red:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-CSS"}},[s._v("$"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("red")]),s._v(";\n")])]),a("h4",{attrs:{id:"build-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("Build theme")])]),a("p",[s._v("After saving the variable file, use "),a("code",{pre:!0},[s._v("et")]),s._v(" to build your theme. You can activate "),a("code",{pre:!0},[s._v("watch")]),s._v(" mode by adding a parameter "),a("code",{pre:!0},[s._v("-w")]),s._v(". And if you customized the variable file's output, you need to add a parameter "),a("code",{pre:!0},[s._v("-c")]),s._v(" and variable file's name:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h4",{attrs:{id:"import-custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("Import custom theme")])]),a("p",[s._v("By default the build theme file is placed inside "),a("code",{pre:!0},[s._v("./theme")]),s._v(". You can specify its output directory with parameter "),a("code",{pre:!0},[s._v("-o")]),s._v(". Importing your own theme is just like importing the default theme, only this time you import the file you just built:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h4",{attrs:{id:"import-component-theme-on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("Import component theme on demand")])]),a("p",[s._v("If you are using "),a("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(" for on-demand import, just modify "),a("code",{pre:!0},[s._v(".babelrc")]),s._v(" and specify "),a("code",{pre:!0},[s._v("styleLibraryName")]),s._v(" to the path where your custom theme is located relative to "),a("code",{pre:!0},[s._v(".babelrc")]),s._v(". Note that "),a("code",{pre:!0},[s._v("~")]),s._v(" is required:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-json"}},[s._v("{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [["),a("span",{attrs:{class:"hljs-string"}},[s._v('"component"')]),s._v(", [\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"libraryName"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"element-ui"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"~theme"')]),s._v("\n }\n ]]]\n}\n")])]),a("p",[s._v("If you are unfamiliar with "),a("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(", please refer to "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[s._v("Quick Start")]),s._v(". For more details, check out the "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("project repository")]),s._v(" of "),a("code",{pre:!0},[s._v("element-theme")]),s._v(".")])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1073)},function(s,t,a){"use strict";function l(s){a(1074)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1076),n=a.n(e),r=a(1077),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1075);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("6bf976ae",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-block.demo-date-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-date-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-date-picker .block:last-child{border-right:none}.demo-date-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t,a){"use strict";s.exports={data:function(){return{pickerOptions1:{disabledDate:function(s){return s.getTime()>Date.now()},shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:[]}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Date Picker for date input.")]),s._m(1),a("p",[s._v("Basic date picker measured by 'day'.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions1: {\n disabledDate(time) {\n return time.getTime() > Date.now();\n },\n shortcuts: [{\n text: 'Today',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Yesterday',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: 'A week ago',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: '',\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Picker with quick options")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("The measurement is determined by the "),a("code",[s._v("type")]),s._v(" attribute. You can enable quick options by creating a "),a("code",[s._v("picker-options")]),s._v(" object with "),a("code",[s._v("shortcuts")]),s._v(" property. The disabled date is set by "),a("code",[s._v("disabledDate")]),s._v(", which is a function.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a day"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Picker with quick options"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a day"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions1")]),s._v(": {\n disabledDate(time) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" time.getTime() > "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v(".now();\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can choose week, month or year by extending the standard date picker component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Week\n \n \n
    \n
    \n Month\n \n \n
    \n
    \n Year\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value3: '',\n value4: '',\n value5: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Week")]),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Month")]),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Year")]),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Week"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"week"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Week WW"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a week"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Month"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"month"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a month"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Year"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"year"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a year"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Picking a date range is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: 'Last week',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last month',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value6: '',\n value7: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With quick options")]),a("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the "),a("code",[s._v("unlink-panels")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With quick options"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("unlink-panels")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value8: '',\n value9: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("date")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("daterange")]),a("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}})],1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("date"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2010-10-01"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("daterange"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2010-10-01"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value10: '',\n value11: '',\n value12: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Emits Date object")]),a("div",{staticClass:"demonstration"},[s._v("Value: "+s._s(s.value10))]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Use value-format")]),a("div",{staticClass:"demonstration"},[s._v("Value: "+s._s(s.value11))]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:s.value11,callback:function(t){s.value11=t},expression:"value11"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Timestamp")]),a("div",{staticClass:"demonstration"},[s._v("Value："+s._s(s.value12))]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:s.value12,callback:function(t){s.value12=t},expression:"value12"}})],1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Emits Date object"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Value: {{ value10 }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"yyyy/MM/dd"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Use value-format"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Value: {{ value11 }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value11"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"yyyy/MM/dd"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value-format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"yyyy-MM-dd"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Timestamp"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Value：{{ value12 }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value12"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"yyyy/MM/dd"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value-format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"timestamp"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value11")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value12")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("When picking a date range, you can assign the time part for start date and end date.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value13: []\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("p",[s._v("Component value："+s._s(s.value13))]),a("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start date","end-placeholder":"End date","default-time":["00:00:00","23:59:59"]},model:{value:s.value13,callback:function(t){s.value13=t},expression:"value13"}})],1)]],2),a("p",[s._v("By default, the time part of start date and end date are both "),a("code",[s._v("00:00:00")]),s._v(". Setting "),a("code",[s._v("default-time")]),s._v(" can change their time respectively. It accepts an array of up to two strings with the format of "),a("code",[s._v("12:00:00")]),s._v(". The first string sets the time for the start date, and the second for the end date.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Component value：{{ value13 }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value13"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['00:00:00', '23:59:59']\"")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value13")]),s._v(": []\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[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)},e=[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:"default-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default Value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If user hasn't picked a date, shows today's calendar by default. You can use "),a("code",{pre:!0},[s._v("default-value")]),s._v(" to set another date. Its value should be parsable by "),a("code",{pre:!0},[s._v("new Date()")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If type is "),a("code",{pre:!0},[s._v("daterange")]),s._v(", "),a("code",{pre:!0},[s._v("default-value")]),s._v(" sets the left side calendar.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-formats"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-formats","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date Formats")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",{pre:!0},[s._v("format")]),s._v(" to control displayed text's format in the input box. Use "),a("code",{pre:!0},[s._v("value-format")]),s._v(" to control binding value's format.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("By default, the component accepts and emits a "),a("code",{pre:!0},[s._v("Date")]),s._v(" object. Below are supported format strings, using UTC 2017-01-02 03:04:05 as an example:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("Pay attention to capitalization")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("format")]),a("th",[s._v("meaning")]),a("th",[s._v("note")]),a("th",[s._v("example")])])]),a("tbody",[a("tr",[a("td",[a("code",{pre:!0},[s._v("yyyy")])]),a("td",[s._v("year")]),a("td"),a("td",[s._v("2017")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("M")])]),a("td",[s._v("month")]),a("td",[s._v("no leading 0")]),a("td",[s._v("1")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("MM")])]),a("td",[s._v("month")]),a("td"),a("td",[s._v("01")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("W")])]),a("td",[s._v("week")]),a("td",[s._v("only for week picker's "),a("code",{pre:!0},[s._v("format")]),s._v("; no leading 0")]),a("td",[s._v("1")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("WW")])]),a("td",[s._v("week")]),a("td",[s._v("only for week picker's "),a("code",{pre:!0},[s._v("format")])]),a("td",[s._v("01")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("d")])]),a("td",[s._v("day")]),a("td",[s._v("no leading 0")]),a("td",[s._v("2")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("dd")])]),a("td",[s._v("day")]),a("td"),a("td",[s._v("02")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("H")])]),a("td",[s._v("hour")]),a("td",[s._v("24-hour clock; no leading 0")]),a("td",[s._v("3")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("HH")])]),a("td",[s._v("hour")]),a("td",[s._v("24-hour clock")]),a("td",[s._v("03")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("h")])]),a("td",[s._v("hour")]),a("td",[s._v("12-hour clock; must be used with "),a("code",{pre:!0},[s._v("A")]),s._v(" or "),a("code",{pre:!0},[s._v("a")]),s._v("; no leading 0")]),a("td",[s._v("3")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("hh")])]),a("td",[s._v("hour")]),a("td",[s._v("12-hour clock; must be used with "),a("code",{pre:!0},[s._v("A")]),s._v(" or "),a("code",{pre:!0},[s._v("a")])]),a("td",[s._v("03")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("m")])]),a("td",[s._v("minute")]),a("td",[s._v("no leading 0")]),a("td",[s._v("4")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("mm")])]),a("td",[s._v("minute")]),a("td"),a("td",[s._v("04")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("s")])]),a("td",[s._v("second")]),a("td",[s._v("no leading 0")]),a("td",[s._v("5")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("ss")])]),a("td",[s._v("second")]),a("td"),a("td",[s._v("05")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("A")])]),a("td",[s._v("AM/PM")]),a("td",[s._v("only for "),a("code",{pre:!0},[s._v("format")]),s._v(", uppercased")]),a("td",[s._v("AM")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("a")])]),a("td",[s._v("am/pm")]),a("td",[s._v("only for "),a("code",{pre:!0},[s._v("format")]),s._v(", lowercased")]),a("td",[s._v("am")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("timestamp")])]),a("td",[s._v("JS timestamp")]),a("td",[s._v("only for "),a("code",{pre:!0},[s._v("value-format")]),s._v("; binding value will be a "),a("code",{pre:!0},[s._v("number")])]),a("td",[s._v("1483326245000")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"default-time-for-start-date-and-end-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-time-for-start-date-and-end-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default time for start date and end date")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder in non-range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("placeholder for the start date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("placeholder for the end date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the displayed value in the input box")]),a("td",[s._v("string")]),a("td",[s._v("see "),a("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[s._v("date formats")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DatePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("optional, default date of the calendar")]),a("td",[s._v("Date")]),a("td",[s._v("anything accepted by "),a("code",{pre:!0},[s._v("new Date()")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-time")]),a("td",[s._v("optional, the time value to use when selecting date range")]),a("td",[s._v("string[]")]),a("td",[s._v("Array with length 2, each item is a string like "),a("code",{pre:!0},[s._v("12:00:00")]),s._v(". The first item for the start date and then second item for the end date")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value-format")]),a("td",[s._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),a("td",[s._v("string")]),a("td",[s._v("see "),a("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[s._v("date formats")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unlink-panels")]),a("td",[s._v("unlink two date-panels in range-picker")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("Custom prefix icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-date")])]),a("tr",[a("td",[s._v("clear-icon")]),a("td",[s._v("Custom clear icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-circle-close")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("a callback that triggers when the selected date is changed. Only for "),a("code",{pre:!0},[s._v("daterange")]),s._v(" and "),a("code",{pre:!0},[s._v("datetimerange")]),s._v(".")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this,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",{pre:!0},[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",{pre:!0},[s._v("pick")]),s._v(" event. Example: "),a("code",{pre:!0},[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 user confirms the value")]),a("td",[s._v("component's binding value")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("component instance")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("component instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1079)},function(s,t,a){"use strict";function l(s){a(1080)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1082),n=a.n(e),r=a(1083),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1081);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("3bf54832",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-block.demo-datetime-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-datetime-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-datetime-picker .block:last-child{border-right:none}.demo-datetime-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t,a){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:new Date,value4:"",value5:"",value6:""}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Select date and time in one picker.")]),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions1: {\n shortcuts: [{\n text: 'Today',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Yesterday',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: 'A week ago',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("You can select date and time in one picker at the same time by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetime")]),s._v(". The way to use shortcuts is the same as Date Picker.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select date and time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select date and time"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions1")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: 'Last week',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last month',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value4: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1)]],2),a("p",[s._v("You can select date and time range by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetimerange")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": ["),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v("), "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("11")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(")],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value5: '',\n value6: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Start date time 12:00:00")]),a("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Start date time 12:00:00, end date time 08:00:00")]),a("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00","08:00:00"]},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1)]],2),a("p",[s._v("When picking date range on the date panel with type "),a("code",[s._v("datetimerange")]),s._v(", "),a("code",[s._v("00:00:00")]),s._v(" will be used as the default time value for start and end date. We can control it with the "),a("code",[s._v("default-time")]),s._v(" attribute. "),a("code",[s._v("default-time")]),s._v(" accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Start date time 12:00:00"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['12:00:00']\"")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Start date time 12:00:00, end date time 08:00:00"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['12:00:00', '08:00:00']\"")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on "),a("code",{pre:!0},[s._v("pickerOptions")]),s._v(" and other attributes, you can refer to DatePicker and TimePicker.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"default-time-value-for-start-date-and-end-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-time-value-for-start-date-and-end-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default time value for start date and end date")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder in non-range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("placeholder for the start date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("placeholder for the end date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("time-arrow-control")]),a("td",[s._v("whether to pick time using arrow buttons")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the displayed value in the input box")]),a("td",[s._v("string")]),a("td",[s._v("see "),a("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[s._v("date formats")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DateTimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("optional, default date of the calendar")]),a("td",[s._v("Date")]),a("td",[s._v("anything accepted by "),a("code",{pre:!0},[s._v("new Date()")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-time")]),a("td",[s._v("the time value to use when selecting date range")]),a("td",[s._v("string[]")]),a("td",[s._v("Array with length 2, each item is a string like "),a("code",{pre:!0},[s._v("12:00:00")]),s._v(". The first item for the start date and then second item for the end date")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value-format")]),a("td",[s._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),a("td",[s._v("string")]),a("td",[s._v("see "),a("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[s._v("date formats")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unlink-panels")]),a("td",[s._v("unllink two date-panels in range-picker")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("Custom prefix icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-date")])]),a("tr",[a("td",[s._v("clear-icon")]),a("td",[s._v("Custom clear icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-circle-close")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])])])])},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",{pre:!0},[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",{pre:!0},[s._v("pick")]),s._v(" event. Example: "),a("code",{pre:!0},[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 user confirms the value")]),a("td",[s._v("component's binding value")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("component instance")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("component instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1085)},function(s,t,a){"use strict";function l(s){a(1086)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1088),n=a.n(e),r=a(1089),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1087);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("0a4efab7",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".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,a){"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,outerVisible:!1,innerVisible:!1,centerDialogVisible:!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,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Informs users while preserving the current page state.")]),s._m(1),a("p",[s._v("Dialog pops up a dialog box, and it's quite customizable.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'click to open the Dialog\n\n\n This is a message\n \n Cancel\n Confirm\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n dialogVisible: false\n };\n },\n methods: {\n handleClose(done) {\n this.$confirm('Are you sure to close this dialog?')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("click to open the Dialog")]),a("el-dialog",{attrs:{title:"Tips",visible:s.dialogVisible,width:"30%","before-close":s.handleClose},on:{"update:visible":function(t){s.dialogVisible=t}}},[a("span",[s._v("This is a message")]),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Set the "),a("code",[s._v("visible")]),s._v(" attribute with a "),a("code",[s._v("Boolean")]),s._v(", and Dialog shows when it is "),a("code",[s._v("true")]),s._v(". The Dialog has two parts: "),a("code",[s._v("body")]),s._v(" and "),a("code",[s._v("footer")]),s._v(", and the latter requires a "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("footer")]),s._v(". The optional "),a("code",[s._v("title")]),s._v(" attribute (empty by default) is for defining a title. Finally, this example demonstrates how "),a("code",[s._v("before-close")]),s._v(" is used.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Tips"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":before-close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("This is a message"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dialogVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClose(done) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Are you sure to close this dialog?'")]),s._v(")\n .then("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n done();\n })\n .catch("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {});\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("p",[s._v("The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\x3c!-- Table --\x3e\nopen a Table nested Dialog\n\n\n \n \n \n \n \n\n\n\x3c!-- Form --\x3e\nopen a Form nested Dialog\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n Cancel\n Confirm\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-03',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n dialogTableVisible: false,\n dialogFormVisible: false,\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n formLabelWidth: '120px'\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("open a Table nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogTableVisible},on:{"update:visible":function(t){s.dialogTableVisible=t}}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("open a Form nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogFormVisible},on:{"update:visible":function(t){s.dialogFormVisible=t}}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":s.formLabelWidth}},[a("el-input",{attrs:{"auto-complete":"off"},model:{value:s.form.name,callback:function(t){s.$set(s.form,"name",t)},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Zones","label-width":s.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:s.form.region,callback:function(t){s.$set(s.form,"region",t)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Confirm")])],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- Table --\x3e")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("open a Table nested Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Shipping address"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- Form --\x3e")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("open a Form nested Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Shipping address"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zones"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.region"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please select a zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone No.1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone No.2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("gridData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dialogTableVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dialogFormVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("form")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("formLabelWidth")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'120px'")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n outerVisible: false,\n innerVisible: false\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.outerVisible=!0}}},[s._v("open the outer Dialog")]),a("el-dialog",{attrs:{title:"Outer Dialog",visible:s.outerVisible},on:{"update:visible":function(t){s.outerVisible=t}}},[a("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:s.innerVisible,"append-to-body":""},on:{"update:visible":function(t){s.innerVisible=t}}}),a("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.outerVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.innerVisible=!0}}},[s._v("open the inner Dialog")])],1)],1)]],2),a("p",[s._v("Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set "),a("code",[s._v("append-to-body")]),s._v(" of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"outerVisible = true"')]),s._v(">")]),s._v("open the outer Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Outer Dialog"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"outerVisible"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Inner Dialog"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"innerVisible"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("append-to-body")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"outerVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"innerVisible = true"')]),s._v(">")]),s._v("open the inner Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("outerVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("innerVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),a("p",[s._v(":::")]),s._m(6),a("p",[s._v("Dialog's content can be centered.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Click to open the Dialog\n\n\n It should be noted that the content will not be aligned in center by default\n \n Cancel\n Confirm\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n centerDialogVisible: false\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.centerDialogVisible=!0}}},[s._v("Click to open the Dialog")]),a("el-dialog",{attrs:{title:"Warning",visible:s.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(t){s.centerDialogVisible=t}}},[a("span",[s._v("It should be noted that the content will not be aligned in center by default")]),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.centerDialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.centerDialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Setting "),a("code",[s._v("center")]),s._v(" to "),a("code",[s._v("true")]),s._v(" will center dialog's header and footer horizontally.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = true"')]),s._v(">")]),s._v("Click to open the Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Warning"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("It should be noted that the content will not be aligned in center by default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("centerDialogVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("code",{pre:!0},[s._v("before-close")]),s._v(" only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the "),a("code",{pre:!0},[s._v("footer")]),s._v(" named slot, you can add what you would do with "),a("code",{pre:!0},[s._v("before-close")]),s._v(" in the buttons' click event handler.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If a Dialog is nested in another Dialog, "),a("code",{pre:!0},[s._v("append-to-body")]),s._v(" is required.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"centered-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("code",{pre:!0},[s._v("center")]),s._v(" only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("If the variable bound to "),a("code",{pre:!0},[s._v("visible")]),s._v(" is managed in Vuex store, the "),a("code",{pre:!0},[s._v(".sync")]),s._v(" can not work properly. In this case, please remove the "),a("code",{pre:!0},[s._v(".sync")]),s._v(" modifier, listen to "),a("code",{pre:!0},[s._v("open")]),s._v(" and "),a("code",{pre:!0},[s._v("close")]),s._v(" events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.")])])},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("visible")]),a("td",[s._v("visibility of Dialog, supports the .sync modifier")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("50%")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("whether the Dialog takes up full screen")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("value for "),a("code",{pre:!0},[s._v("margin-top")]),s._v(" of Dialog CSS")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15vh")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("whether a mask is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("append-to-body")]),a("td",[s._v("whether to append Dialog itself to body. A nested Dialog should have this attribute set to "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("whether scroll of body is disabled while Dialog is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("custom class names for Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("whether the Dialog can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("whether the Dialog can be closed by pressing ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("before-close")]),a("td",[s._v("callback before Dialog closes, and it will prevent Dialog from closing")]),a("td",[s._v("function(done)，done is used to close the Dialog")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to align the header and footer in center")]),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:"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("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1091)},function(s,t,a){"use strict";function l(s){a(1092)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1094),n=a.n(e),r=a(1095),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1093);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("916172b8",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-box .el-dropdown{vertical-align:top}.demo-box .el-dropdown+.el-dropdown{margin-left:15px}.demo-box .el-dropdown-link{cursor:pointer;color:#409eff}.demo-box .el-icon-arrow-down{font-size:12px}.block-col-2{margin:-24px}.block-col-2 .el-col{padding:30px 0;text-align:center;border-right:1px solid #eff2f6}.block-col-2 .el-col:last-child{border-right:0}.demo-dropdown .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t,a){"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,a){"use strict";var l=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:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n")])])])]),s._m(2),a("p",[s._v("Use the button to trigger the dropdown list.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n Dropdown List\n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n\n',script:"\n export default {\n methods: {\n handleClick() {\n alert('button click');\n }\n }\n }\n",style:"\n .el-dropdown {\n vertical-align: top;\n }\n .el-dropdown + .el-dropdown {\n margin-left: 15px;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n Dropdown List\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("p",[s._v("Use "),a("code",[s._v("split-button")]),s._v(" to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class "),a("code",[s._v("divider")]),s._v(" to item four.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n Dropdown List\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("vertical-align")]),s._v(": top;\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" + "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("15px")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick() {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'button click'")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Click the triggering element or hover on it.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n hover to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n \n click to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n .demonstration {\n display: block;\n color: #8492a6;\n font-size: 14px;\n margin-bottom: 20px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover to trigger")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click to trigger")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1)],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("trigger")]),s._v(". By default, it is "),a("code",[s._v("hover")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("hover to trigger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("click to trigger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".demonstration")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#8492a6")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._v("By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":hide-on-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n\n',script:"\n export default {\n methods: {\n handleCommand(command) {\n this.$message('click on item ' + command);\n }\n }\n }\n",style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"d"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"e"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCommand(command) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),a("span",{attrs:{class:"hljs-string"}},[s._v("'click on item '")]),s._v(" + command);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Default\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Medium\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Small\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Mini\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[s._v("\n Default\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1),a("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[s._v("\n Medium\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1),a("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[s._v("\n Small\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1),a("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[s._v("\n Mini\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1)],1),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("medium")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Default\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Medium\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Small\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Mini\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"triggering-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Triggering element")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"how-to-trigger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[s._v("¶")]),s._v(" How to trigger")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-hiding-behavior"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu hiding behavior")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",{pre:!0},[s._v("hide-on-click")]),s._v(" to define if menu closes on clicking.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"command-event"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[s._v("¶")]),s._v(" Command event")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("menu button type, refer to "),a("code",{pre:!0},[s._v("Button")]),s._v(" Component, only works when "),a("code",{pre:!0},[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("menu size, also works on the split button")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("whether a button group is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("placement of pop menu")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),a("td",[s._v("bottom-end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how to trigger")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("whether to hide menu after clicking menu-item")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-timeout")]),a("td",[s._v("Delay time before show a dropdown (only works when trigger is "),a("code",{pre:!0},[s._v("hover")]),s._v(")")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("250")])]),a("tr",[a("td",[s._v("hide-timeout")]),a("td",[s._v("Delay time before hide a dropdown (only works when trigger is "),a("code",{pre:!0},[s._v("hover")]),s._v(")")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("150")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("if "),a("code",{pre:!0},[s._v("split-button")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v(", triggers when left button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("triggers when a dropdown item is clicked")]),a("td",[s._v("the command dispatched from the dropdown item")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("a command to be dispatched to Dropdown's "),a("code",{pre:!0},[s._v("command")]),s._v(" callback")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the item is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("whether a divider is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1097)},function(s,t,a){"use strict";function l(s){a(1098)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1100),n=a.n(e),r=a(1101),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1099);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("3fee593f",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,'.demo-form.demo-en-US .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-en-US .el-select .el-input{width:360px}.demo-form.demo-en-US .el-form{width:480px}.demo-form.demo-en-US .line{text-align:center}.demo-form.demo-en-US .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-en-US .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-en-US .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-en-US .el-checkbox-group:after,.demo-form.demo-en-US .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-en-US .demo-form-normal{width:480px}.demo-form.demo-en-US .demo-form-inline{width:auto}.demo-form.demo-en-US .demo-form-inline .el-input{width:150px}.demo-form.demo-en-US .demo-form-inline>*{margin-right:10px}.demo-form.demo-en-US .demo-ruleForm{width:480px}.demo-form.demo-en-US .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-en-US .demo-dynamic{width:500px}.demo-form.demo-en-US .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-en-US .fr{float:right}',""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){var s=this,t=function(s,t,a){if(!t)return a(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3)};return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},labelPosition:"right",formLabelAlign:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]},rules2:{pass:[{validator:function(t,a,l){""===a?l(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},trigger:"blur"}],checkPass:[{validator:function(t,a,l){""===a?l(new Error("Please input the password again")):a!==s.ruleForm2.pass?l(new Error("Two inputs don't match!")):l()},trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{key:Date.now(),value:""}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},onRuleFormSubmit:function(){console.log("onRuleFormSubmit")},submitForm:function(s){this.$refs[s].validate(function(s){if(!s)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Cancel\n \n\n\n',script:"\n export default {\n data() {\n return {\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:s.form.name,callback:function(t){s.$set(s.form,"name",t)},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.form.region,callback:function(t){s.$set(s.form,"region",t)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.form.date1,callback:function(t){s.$set(s.form,"date1",t)},expression:"form.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.form.date2,callback:function(t){s.$set(s.form,"date2",t)},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{model:{value:s.form.delivery,callback:function(t){s.$set(s.form,"delivery",t)},expression:"form.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:s.form.type,callback:function(t){s.$set(s.form,"type",t)},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:s.form.resource,callback:function(t){s.$set(s.form,"resource",t)},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(t){s.$set(s.form,"desc",t)},expression:"form.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),a("el-button",[s._v("Cancel")])],1)],1)],1),a("p",[s._v("In each "),a("code",[s._v("form")]),s._v(" component, you need a "),a("code",[s._v("form-item")]),s._v(" field to be the container of your input item.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.region"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.date1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.date2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Instant delivery"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.delivery"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Offline activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.resource"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Sponsor"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.desc"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("form")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),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:'\n \n \n \n \n \n \n \n \n \n \n Query\n \n\n\n',script:"\n export default {\n data() {\n return {\n formInline: {\n user: '',\n region: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:s.formInline.user,callback:function(t){s.$set(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.$set(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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":inline")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formInline"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Approved by"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formInline.user"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Approved by"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formInline.region"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Query"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("formInline")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("user")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Depending on your design, there are several different ways to align your label element.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Left\n Right\n Top\n\n
    \n\n \n \n \n \n \n \n \n \n \n\n\n',script:"\n export default {\n data() {\n return {\n labelPosition: 'right',\n formLabelAlign: {\n name: '',\n region: '',\n type: ''\n }\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.labelPosition,callback:function(t){s.labelPosition=t},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("Left")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("Right")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("Top")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"100px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{model:{value:s.formLabelAlign.name,callback:function(t){s.$set(s.formLabelAlign,"name",t)},expression:"formLabelAlign.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{model:{value:s.formLabelAlign.region,callback:function(t){s.$set(s.formLabelAlign,"region",t)},expression:"formLabelAlign.region"}})],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{model:{value:s.formLabelAlign.type,callback:function(t){s.$set(s.formLabelAlign,"type",t)},expression:"formLabelAlign.type"}})],1)],1)],1),a("p",[s._v("The "),a("code",[s._v("label-position")]),s._v(" attribute decides how labels align, it can be "),a("code",[s._v("top")]),s._v(" or "),a("code",[s._v("left")]),s._v(". When set to "),a("code",[s._v("top")]),s._v(", labels will be placed at the top of the form field.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"labelPosition"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("Left"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("Right"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("Top"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label-position")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"labelPosition"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.region"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("labelPosition")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'right'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("formLabelAlign")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Form component allows you to verify your data, helping you find and correct errors.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Reset\n \n\n\n',script:"\n export default {\n data() {\n return {\n ruleForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n rules: {\n name: [\n { required: true, message: 'Please input Activity name', trigger: 'blur' },\n { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }\n ],\n region: [\n { required: true, message: 'Please select Activity zone', trigger: 'change' }\n ],\n date1: [\n { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }\n ],\n date2: [\n { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }\n ],\n type: [\n { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }\n ],\n resource: [\n { required: true, message: 'Please select activity resource', trigger: 'change' }\n ],\n desc: [\n { required: true, message: 'Please input activity form', trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{model:{value:s.ruleForm.name,callback:function(t){s.$set(s.ruleForm,"name",t)},expression:"ruleForm.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.ruleForm.region,callback:function(t){s.$set(s.ruleForm,"region",t)},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.ruleForm.date1,callback:function(t){s.$set(s.ruleForm,"date1",t)},expression:"ruleForm.date1"}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.ruleForm.date2,callback:function(t){s.$set(s.ruleForm,"date2",t)},expression:"ruleForm.date2"}})],1)],1)],1),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{model:{value:s.ruleForm.delivery,callback:function(t){s.$set(s.ruleForm,"delivery",t)},expression:"ruleForm.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{model:{value:s.ruleForm.type,callback:function(t){s.$set(s.ruleForm,"type",t)},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{model:{value:s.ruleForm.resource,callback:function(t){s.$set(s.ruleForm,"resource",t)},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"Sponsorship"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.ruleForm.desc,callback:function(t){s.$set(s.ruleForm,"desc",t)},expression:"ruleForm.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm")}}},[s._v("Create")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Just add the "),a("code",[s._v("rules")]),s._v(" attribute for "),a("code",[s._v("Form")]),s._v(" component, pass validation rules, and set "),a("code",[s._v("prop")]),s._v(" attribute for "),a("code",[s._v("Form-Item")]),s._v(" as a specific key that needs to be validated. See more information at "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rules"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"region"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.region"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Instant delivery"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"delivery"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.delivery"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Offline activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"resource"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Sponsorship"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"desc"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("Create"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ruleForm")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input Activity name'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Length should be 3 to 5'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select Activity zone'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please pick a date'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please pick a time'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'array'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select at least one activity type'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select activity resource'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input activity form'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n Submit\n Reset\n \n\n\n',script:"\n export default {\n data() {\n var checkAge = (rule, value, callback) => {\n if (!value) {\n return callback(new Error('Please input the age'));\n }\n setTimeout(() => {\n if (!Number.isInteger(value)) {\n callback(new Error('Please input digits'));\n } else {\n if (value < 18) {\n callback(new Error('Age must be greater than 18'));\n } else {\n callback();\n }\n }\n }, 1000);\n };\n var validatePass = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('Please input the password'));\n } else {\n if (this.ruleForm2.checkPass !== '') {\n this.$refs.ruleForm2.validateField('checkPass');\n }\n callback();\n }\n };\n var validatePass2 = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('Please input the password again'));\n } else if (value !== this.ruleForm2.pass) {\n callback(new Error('Two inputs don\\'t match!'));\n } else {\n callback();\n }\n };\n return {\n ruleForm2: {\n pass: '',\n checkPass: '',\n age: ''\n },\n rules2: {\n pass: [\n { validator: validatePass, trigger: 'blur' }\n ],\n checkPass: [\n { validator: validatePass2, trigger: 'blur' }\n ],\n age: [\n { validator: checkAge, trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,"status-icon":"",rules:s.rules2,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.pass,callback:function(t){s.$set(s.ruleForm2,"pass",t)},expression:"ruleForm2.pass"}})],1),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.checkPass,callback:function(t){s.$set(s.ruleForm2,"checkPass",t)},expression:"ruleForm2.checkPass"}})],1),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{model:{value:s.ruleForm2.age,callback:function(t){s.$set(s.ruleForm2,"age",s._n(t))},expression:"ruleForm2.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Here we use "),a("code",[s._v("status-icon")]),s._v(" to reflect validation result as an icon.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status-icon")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rules2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Password"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pass"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"password"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Confirm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkPass"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"password"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Age"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model.number")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2.age"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("Submit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("Reset"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" checkAge = "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!value) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input the age'")]),s._v("));\n }\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v(".isInteger(value)) {\n callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input digits'")]),s._v("));\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value < "),a("span",{attrs:{class:"hljs-number"}},[s._v("18")]),s._v(") {\n callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Age must be greater than 18'")]),s._v("));\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n callback();\n }\n }\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(");\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" validatePass = "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value === "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input the password'")]),s._v("));\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkPass'")]),s._v(");\n }\n callback();\n }\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" validatePass2 = "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value === "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input the password again'")]),s._v("));\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value !== "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".ruleForm2.pass) {\n callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Two inputs don\\'t match!'")]),s._v("));\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n callback();\n }\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ruleForm2")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pass")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkPass")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules2")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pass")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": validatePass, "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkPass")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": validatePass2, "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": checkAge, "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n Delete\n \n \n Submit\n New domain\n Reset\n \n\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",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:"blur,change"}]}},[a("el-input",{model:{value:s.dynamicValidateForm.email,callback:function(t){s.$set(s.dynamicValidateForm,"email",t)},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(t,l){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+l,prop:"domains."+l+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(a){s.$set(t,"value",a)},expression:"domain.value"}}),a("el-button",{on:{click:function(a){a.preventDefault(),s.removeDomain(t)}}},[s._v("Delete")])],1)}),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("dynamicValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:s.addDomain}},[s._v("New domain")]),a("el-button",{on:{click:function(t){s.resetForm("dynamicValidateForm")}}},[s._v("Reset")])],1)],2)],1),a("p",[s._v("In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"email"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Email"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"[\n { required: true, message: 'Please input email address', trigger: 'blur' },\n { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }\n ]\"")]),s._v("\n >")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"'Domain' + index\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"domain.key"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n required: true, message: 'domain can not be null', trigger: 'blur'\n }\"")]),s._v("\n >")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"domain.value"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click.prevent")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("Delete"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"addDomain"')]),s._v(">")]),s._v("New domain"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dynamicValidateForm")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("domains")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n },\n removeDomain(item) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" index = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item);\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index !== "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n }\n },\n addDomain() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v(".now(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n Submit\n Reset\n \n\n\n',script:"\n export default {\n data() {\n return {\n numberValidateForm: {\n age: ''\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[a("el-input",{attrs:{type:"age","auto-complete":"off"},model:{value:s.numberValidateForm.age,callback:function(t){s.$set(s.numberValidateForm,"age",s._n(t))},expression:"numberValidateForm.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("numberValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("numberValidateForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Number Validate need a "),a("code",[s._v(".number")]),s._v(" modifier added on the input "),a("code",[s._v("v-model")]),s._v(" binding，it's used to transform the string value to the number which is provided by Vuejs.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"[\n { required: true, message: 'age is required'},\n { type: 'number', message: 'age must be a number'}\n ]\"")]),s._v("\n >")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model.number")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"numberValidateForm.age"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("numberValidateForm")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Cancel\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n sizeForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n }\n };\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.sizeForm,"label-width":"120px",size:"mini"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:s.sizeForm.name,callback:function(t){s.$set(s.sizeForm,"name",t)},expression:"sizeForm.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.sizeForm.region,callback:function(t){s.$set(s.sizeForm,"region",t)},expression:"sizeForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.sizeForm.date1,callback:function(t){s.$set(s.sizeForm,"date1",t)},expression:"sizeForm.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.sizeForm.date2,callback:function(t){s.$set(s.sizeForm,"date2",t)},expression:"sizeForm.date2"}})],1)],1),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:s.sizeForm.type,callback:function(t){s.$set(s.sizeForm,"type",t)},expression:"sizeForm.type"}},[a("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:s.sizeForm.resource,callback:function(t){s.$set(s.sizeForm,"resource",t)},expression:"sizeForm.resource"}},[a("el-radio",{attrs:{border:"",label:"Sponsor"}}),a("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),a("el-form-item",{attrs:{size:"large"}},[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),a("el-button",[s._v("Cancel")])],1)],1)],1),a("p",[s._v("Still you can fine tune each component's "),a("code",[s._v("size")]),s._v(" if you don't want that component to inherit its size from From or FormIten.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.region"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.date1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.date2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.resource"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Sponsor"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"large"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sizeForm")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Form consists of "),a("code",{pre:!0},[s._v("input")]),s._v(", "),a("code",{pre:!0},[s._v("radio")]),s._v(", "),a("code",{pre:!0},[s._v("select")]),s._v(", "),a("code",{pre:!0},[s._v("checkbox")]),s._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("It includes all kinds of input items, such as "),a("code",{pre:!0},[s._v("input")]),s._v(", "),a("code",{pre:!0},[s._v("select")]),s._v(", "),a("code",{pre:!0},[s._v("radio")]),s._v(" and "),a("code",{pre:!0},[s._v("checkbox")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[s._v("W3C")]),s._v(" regulates that")]),a("blockquote",[a("p",[a("i",[s._v("When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.")])])]),a("p",[s._v("To prevent this behavior, you can add "),a("code",{pre:!0},[s._v("@submit.native.prevent")]),s._v(" on "),a("code",{pre:!0},[s._v("")]),s._v(".")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"inline-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inline form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"validation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Validation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-validation-rules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom validation rules")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Delete or add form items dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"number-validate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Number Validate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("When an "),a("code",{pre:!0},[s._v("el-form-item")]),s._v(" is nested in another "),a("code",{pre:!0},[s._v("el-form-item")]),s._v(", its label width will be "),a("code",{pre:!0},[s._v("0")]),s._v(". You can set "),a("code",{pre:!0},[s._v("label-width")]),s._v(" on that "),a("code",{pre:!0},[s._v("el-form-item")]),s._v(" if needed.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"size-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#size-control","aria-hidden":"true"}},[s._v("¶")]),s._v(" Size control")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("All components in a Form inherit their "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute from that Form. Similarly, FormItem also has a "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("data of form component")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("whether the form is inline")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("position of label")]),a("td",[s._v("string")]),a("td",[s._v("left / right / top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, and all its direct child form items will inherit this value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("suffix of the label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("inline-message")]),a("td",[s._v("whether to display the error message inline with the form item")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status-icon")]),a("td",[s._v("whether to display an icon indicating the validation result")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("validate-on-rule-change")]),a("td",[s._v("whether to trigger validation when the "),a("code",{pre:!0},[s._v("rules")]),s._v(" prop is changed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("control the size of components in this form")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' "),a("code",{pre:!0},[s._v("disabled")]),s._v(" prop")]),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:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("the method to validate the whole form. Returns a promise if callback is omitted")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("the method to validate a certain form item")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("reset all the fields and remove validation result")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearValidate")]),a("td",[s._v("clear validation message for all fields")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("a key of "),a("code",{pre:!0},[s._v("model")]),s._v(". In the use of validate and resetFields method, the attribute is required")]),a("td",[s._v("string")]),a("td",[s._v("keys of model that passed to "),a("code",{pre:!0},[s._v("form")])]),a("td")]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, e.g. '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("whether the field is required or not, will be determined by validation rules if omitted")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("field error message, set its value and the field will validate error and show this message immediately")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("inline-message")]),a("td",[s._v("inline style validate message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("control the size of components in this form-item")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item 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 Form Item")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("content of label")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("resetField")]),a("td",[s._v("reset current field and remove validation result")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1103)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1104),e=a(0),n=e(null,l.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"internationalization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internationalization")]),a("p",[s._v("The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("Or if you are importing Element on demand:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" lang "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),a("span",{attrs:{class:"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",{pre:!0},[s._v("NormalModuleReplacementPlugin")]),s._v(" provided by webpack you can replace default locale:")]),a("p",[s._v("webpack.config.js")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[s._v("{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plugins")]),s._v(": [\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{attrs:{class:"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",{pre:!0},[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",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{attrs:{class:"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",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),a("span",{attrs:{class:"hljs-params"}},[s._v("path, options")]),s._v(") ")]),s._v("{\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n }\n})\n")])]),a("h2",{attrs:{id:"compatible-with-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",{pre:!0},[s._v("vue-i18n@6.x")])]),a("p",[s._v("You need to manually handle it for compatibility with "),a("code",{pre:!0},[s._v("6.x")]),s._v(".")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" messages = {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n ...enLocale "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// Or use `Object.assign({ message: 'hello' }, enLocale)`")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n ...zhLocale "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// Or use `Object.assign({ message: '你好' }, zhLocale)`")]),s._v("\n }\n}\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" i18n = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n messages, "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value)\n})\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),a("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(")\n")])]),a("h2",{attrs:{id:"custom-i18n-in-on-demand-components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-i18n-in-on-demand-components","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom i18n in on-demand components")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" DatePicker "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element/lib/date-picker'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" messages = {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n ...enLocale\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n ...zhLocale\n }\n}\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" i18n = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n messages, "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nElementLocale.i18n("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value))\n")])]),a("h2",{attrs:{id:"import-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import via CDN")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),a("p",[s._v("Compatible with "),a("code",{pre:!0},[s._v("vue-i18n")])]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"actionscript"}},[s._v("\n Vue.locale("),a("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n Vue.locale("),a("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),a("p",[s._v("Currently Element ships with the following languages:")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("Simplified Chinese (zh-CN)")]),a("li",[s._v("English (en)")]),a("li",[s._v("German (de)")]),a("li",[s._v("Portuguese (pt)")]),a("li",[s._v("Spanish (es)")]),a("li",[s._v("Danish (da)")]),a("li",[s._v("French (fr)")]),a("li",[s._v("Norwegian (nb-NO)")]),a("li",[s._v("Traditional Chinese (zh-TW)")]),a("li",[s._v("Italian (it)")]),a("li",[s._v("Korean (ko)")]),a("li",[s._v("Japanese (ja)")]),a("li",[s._v("Dutch (nl)")]),a("li",[s._v("Vietnamese (vi)")]),a("li",[s._v("Russian (ru-RU)")]),a("li",[s._v("Turkish (tr-TR)")]),a("li",[s._v("Brazilian Portuguese (pt-br)")]),a("li",[s._v("Farsi (fa)")]),a("li",[s._v("Thai (th)")]),a("li",[s._v("Indonesian (id)")]),a("li",[s._v("Bulgarian (bg)")]),a("li",[s._v("Polish (pl)")]),a("li",[s._v("Finnish (fi)")]),a("li",[s._v("Swedish (sv-SE)")]),a("li",[s._v("Greek (el)")]),a("li",[s._v("Slovak (sk)")]),a("li",[s._v("Catalunya (ca)")]),a("li",[s._v("Czech (cs-CZ)")]),a("li",[s._v("Ukrainian (ua)")]),a("li",[s._v("Turkmen (tk)")]),a("li",[s._v("Tamil (ta)")]),a("li",[s._v("Latvian (lv)")]),a("li",[s._v("Afrikaans (af-ZA)")]),a("li",[s._v("Estonian (ee)")]),a("li",[s._v("Slovenian (sl)")]),a("li",[s._v("Arabic (ar)")]),a("li",[s._v("Hebrew (he)")]),a("li",[s._v("Lithuanian (lt)")]),a("li",[s._v("Mongolian (mn)")]),a("li",[s._v("Kazakh (kz)")]),a("li",[s._v("Hungarian (hu)")]),a("li",[s._v("Romanian (ro)")]),a("li",[s._v("Kurdish (ku)")])]),a("p",[s._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[s._v("here")]),s._v(" and create a pull request.")])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1106)},function(s,t,a){"use strict";function l(s){a(1107)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1109),n=a.n(e),r=a(1110),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1108);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("113c6a93",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,'.icon-list li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.demo-icon .source>i{color:#606266;margin:0 20px;font-size:1.5em;vertical-align:middle}.demo-icon .source>button{margin:0 20px}.page-component .content>ul.icon-list{overflow:hidden;list-style:none;padding:0;border:1px solid #eaeefb;border-radius:4px}.icon-list li{float:left;width:16.66%;text-align:center;height:120px;line-height:120px;color:#666;font-size:13px;transition:color .15s linear;border-right:1px solid #eee;border-bottom:1px solid #eee;margin-right:-1px;margin-bottom:-1px}.icon-list li span{display:inline-block;line-height:normal;vertical-align:middle;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#99a9bf}.icon-list li i{display:block;font-size:32px;margin-bottom:15px;color:#606266}.icon-list li .icon-name{display:inline-block;padding:0 3px;height:1em;color:#606266}.icon-list li:hover{color:#5cb6ff}',""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(629);t.default={data:function(){return{icons:l}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element provides a set of common icons.")]),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("i",{staticClass:"el-icon-edit"}),a("i",{staticClass:"el-icon-share"}),a("i",{staticClass:"el-icon-delete"}),a("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[s._v("Search")])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),s._v("Search"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",{key:t},[a("span",[a("i",{class:"el-icon-"+t}),a("span",{staticClass:"icon-name"},[s._v(s._s("el-icon-"+t))])])])}))],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Just assign the class name to "),a("code",{pre:!0},[s._v("el-icon-iconName")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icons")])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1112)},function(s,t,a){"use strict";function l(s){a(1113)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1115),n=a.n(e),r=a(1116),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1114);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("fc398156",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-box.demo-input-number .el-input-number+.el-input-number{margin-left:10px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1,num7:1,num8:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input numerical values with a customizable range.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num1: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value)\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{min:1,max:10},on:{change:s.handleChange},model:{value:s.num1,callback:function(t){s.num1=t},expression:"num1"}})]],2),a("p",[s._v("Bind a variable to "),a("code",[s._v("v-model")]),s._v(" in "),a("code",[s._v("")]),s._v(" element and you are set.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num1")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value)\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(t){s.num2=t},expression:"num2"}})]],2),a("p",[s._v("The "),a("code",[s._v("disabled")]),s._v(" attribute accepts a "),a("code",[s._v("boolean")]),s._v(", and if the value is "),a("code",[s._v("true")]),s._v(", the component is disabled. If you just need to control the value within a range, you can add "),a("code",[s._v("min")]),s._v(" attribute to set the minimum value and "),a("code",[s._v("max")]),s._v(" to set the maximum value. By default, the minimum value is "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num2")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Allows you to define incremental steps.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num3: 5\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(t){s.num3=t},expression:"num3"}})]],2),a("p",[s._v("Add "),a("code",[s._v("step")]),s._v(" attribute to set the step.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num4: 1,\n num5: 1,\n num6: 1,\n num7: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{model:{value:s.num4,callback:function(t){s.num4=t},expression:"num4"}}),a("el-input-number",{attrs:{size:"medium"},model:{value:s.num5,callback:function(t){s.num5=t},expression:"num5"}}),a("el-input-number",{attrs:{size:"small"},model:{value:s.num6,callback:function(t){s.num6=t},expression:"num6"}}),a("el-input-number",{attrs:{size:"mini"},model:{value:s.num7,callback:function(t){s.num7=t},expression:"num7"}})]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num5"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num7"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num4")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num5")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num6")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num7")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num8: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:s.handleChange},model:{value:s.num8,callback:function(t){s.num8=t},expression:"num8"}})]],2),a("p",[s._v("Set "),a("code",[s._v("controls-position")]),s._v(" to decide the position of control buttons.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("controls-position")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num8")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},e=[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("Use attribute "),a("code",{pre:!0},[s._v("size")]),s._v(" to set additional sizes with "),a("code",{pre:!0},[s._v("medium")]),s._v(", "),a("code",{pre:!0},[s._v("small")]),s._v(" or "),a("code",{pre:!0},[s._v("mini")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"controls-position"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#controls-position","aria-hidden":"true"}},[s._v("¶")]),s._v(" Controls Position")])},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",[a("code",{pre:!0},[s._v("-Infinity")])])]),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",{pre:!0},[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("controls-position")]),a("td",[s._v("position of the control buttons")]),a("td",[s._v("string")]),a("td",[s._v("right")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes")]),a("td",[s._v("value after change")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("-")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1118)},function(s,t,a){"use strict";function l(s){a(1119)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1121),n=a.n(e),r=a(1122),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1120);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("1db9a737",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-input.demo-en-US .el-select .el-input{width:130px}.demo-input.demo-en-US .el-input{width:180px}.demo-input.demo-en-US .el-textarea{width:414px}.demo-input.demo-en-US .el-input-group{width:100%}.demo-input.demo-en-US .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-en-US .demo-input-suffix{padding:10px}.demo-input.demo-en-US .demo-input-suffix .el-input{margin-right:15px}.demo-input.demo-en-US .demo-input-label{display:inline-block;width:130px}.demo-input.demo-en-US .input-with-select .el-input-group__prepend{background-color:#fff}.demo-input.demo-en-US .demo-autocomplete{text-align:center}.demo-input.demo-en-US .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-en-US .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-en-US .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{links:[],input:"",input1:"",input2:"",input21:"",input22:"",input23:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",input10:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearch:function(s,t){var a=this.links;t(s?a.filter(this.createStateFilter(s)):a)},querySearchAsync:function(s,t){var a=this.links,l=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(l)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.toLowerCase().indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input data using mouse or keyboard.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\nexport default {\n data() {\n return {\n input: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input,callback:function(t){s.input=t},expression:"input"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input1: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:s.input1,callback:function(t){s.input1=t},expression:"input1"}})],1),a("p",[s._v("Disable the Input with the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input10: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"Please input",clearable:""},model:{value:s.input10,callback:function(t){s.input10=t},expression:"input10"}})],1),a("p",[s._v("Make the Input clearable with the "),a("code",[s._v("clearable")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input10"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("clearable")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input10")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Add an icon to indicate input type.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Using attributes\n \n \n \n \n
    \n
    \n Using slots\n \n \n \n \n \n \n
    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input2: '',\n input21: '',\n input22: '',\n input23: ''\n }\n }\n}\n",style:"\n .demo-input-label {\n display: inline-block;\n width: 130px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[s._v("Using attributes")]),a("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:s.input2,callback:function(t){s.input2=t},expression:"input2"}}),a("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:s.input21,callback:function(t){s.input21=t},expression:"input21"}})],1),a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[s._v("Using slots")]),a("el-input",{attrs:{placeholder:"Pick a date"},model:{value:s.input22,callback:function(t){s.input22=t},expression:"input22"}},[a("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),a("el-input",{attrs:{placeholder:"Type something"},model:{value:s.input23,callback:function(t){s.input23=t},expression:"input23"}},[a("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)]),a("p",[s._v("To add icons in Input, you can simply use "),a("code",[s._v("prefix-icon")]),s._v(" and "),a("code",[s._v("suffix-icon")]),s._v(" attributes. Also, the "),a("code",[s._v("prefix")]),s._v(" and "),a("code",[s._v("suffix")]),s._v(" named slots works as well.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-label"')]),s._v(">")]),s._v("Using attributes"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("suffix-icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Type something"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prefix-icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input21"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-label"')]),s._v(">")]),s._v("Using slots"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input22"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"suffix"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-input__icon el-icon-date"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Type something"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input23"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prefix"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-input__icon el-icon-search"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".demo-input-label")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": inline-block;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("130px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input21")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input22")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input23")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:s.textarea,callback:function(t){s.textarea=t},expression:"textarea"}})],1),a("p",[s._v("Control the height by setting the "),a("code",[s._v("rows")]),s._v(" prop.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rows")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("textarea")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n
    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea2: '',\n textarea3: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:s.textarea2,callback:function(t){s.textarea2=t},expression:"textarea2"}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:s.textarea3,callback:function(t){s.textarea3=t},expression:"textarea3"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("autosize")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 20px 0;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":autosize")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("textarea2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("textarea3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("Prepend or append an element, generally a label or a button.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n \n
    \n\n\n\n',script:"\nexport default {\n data() {\n return {\n input3: '',\n input4: '',\n input5: '',\n select: ''\n }\n }\n}\n",style:"\n .el-select .el-input {\n width: 110px;\n }\n .input-with-select .el-input-group__prepend {\n background-color: #fff;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input3,callback:function(t){s.input3=t},expression:"input3"}},[a("template",{attrs:{slot:"prepend"},slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input4,callback:function(t){s.input4=t},expression:"input4"}},[a("template",{attrs:{slot:"append"},slot:"append"},[s._v(".com")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:s.input5,callback:function(t){s.input5=t},expression:"input5"}},[a("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:s.select,callback:function(t){s.select=t},expression:"select"}},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),a("el-option",{attrs:{label:"Order No.",value:"2"}}),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),a("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)]),a("p",[s._v("Use "),a("code",[s._v("slot")]),s._v(" to distribute elements that prepend or append to Input.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"append"')]),s._v(">")]),s._v(".com"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input5"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input-with-select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"select"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prepend"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Restaurant"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Order No."')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Tel"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"append"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-input")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("110px")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".input-with-select")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-input-group__prepend")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input5")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("select")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n \n \n \n \n \n
    \n\n\n',script:"\nexport default {\n data() {\n return {\n input6: '',\n input7: '',\n input8: '',\n input9: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{placeholder:"Please Input"},model:{value:s.input6,callback:function(t){s.input6=t},expression:"input6"}}),a("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:s.input7,callback:function(t){s.input7=t},expression:"input7"}}),a("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:s.input8,callback:function(t){s.input8=t},expression:"input8"}}),a("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:s.input9,callback:function(t){s.input9=t},expression:"input9"}})],1)]),a("p",[s._v("Add "),a("code",[s._v("size")]),s._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" and "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input6"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input7"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input8"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input9"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input6")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input7")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input8")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input9")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("You can get some recommended tips based on the current input.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    list suggestions when activated
    \n \n     \n \n
    list suggestions on input
    \n \n     \n    \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.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n',style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions when activated")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input"},on:{select:s.handleSelect},model:{value:s.state1,callback:function(t){s.state1=t},expression:"state1"}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions on input")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:s.handleSelect},model:{value:s.state2,callback:function(t){s.state2=t},expression:"state2"}})],1)],1)],1),a("p",[s._v("Autocomplete component provides input suggestions. The "),a("code",[s._v("fetch-suggestions")]),s._v(" attribute is a method that returns suggested input. In this example, "),a("code",[s._v("querySearch(queryString, cb)")]),s._v(" returns suggestions to Autocomplete via "),a("code",[s._v("cb(data)")]),s._v(" when suggestions are ready.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions when activated"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"inline-input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions on input"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"inline-input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":trigger-on-focus")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// call callback function to return suggestions")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Customize how suggestions are displayed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n\n\n\n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state3: \'\'\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 suggestion objects\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n },\n handleIconClick(ev) {\n console.log(ev);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n',style:"\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,placeholder:"Please input"},on:{select:s.handleSelect},scopedSlots:s._u([{key:"default",fn:function(t){return[a("div",{staticClass:"value"},[s._v(s._s(t.item.value))]),a("span",{staticClass:"link"},[s._v(s._s(t.item.link))])]}}]),model:{value:s.state3,callback:function(t){s.state3=t},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:s.handleIconClick},slot:"suffix"})])],1),a("p",[s._v("Use "),a("code",[s._v("scoped slot")]),s._v(" to customize suggestion items. In the scope, you can access the suggestion object via the "),a("code",[s._v("item")]),s._v(" key.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("popper-class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"my-autocomplete"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit el-input__icon"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"suffix"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(">")]),s._v("{{ props.item.value }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(">")]),s._v("{{ props.item.link }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// call callback function to return suggestion objects")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n },\n handleIconClick(ev) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(ev);\n }\n },\n mounted() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("Search data from server-side.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state4: \'\',\n timeout: null\n };\n },\n methods: {\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n querySearchAsync(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n cb(results);\n }, 3000 * Math.random());\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n };\n',style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"Please input"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(t){s.state4=t},expression:"state4"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"querySearchAsync"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("timeout")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n loadAll() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n querySearchAsync(queryString, cb) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n\n clearTimeout("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timeout);\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n cb(results);\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(" * "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random());\n },\n createFilter(queryString) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n handleSelect(item) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26),s._m(27)],1)},e=[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:"clearable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clearable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Clearable")])},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",{pre:!0},[s._v('type="textarea"')]),s._v(" to change "),a("code",{pre:!0},[s._v("input")]),s._v(" into native "),a("code",{pre:!0},[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",{pre:!0},[s._v("autosize")]),s._v(" prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to "),a("code",{pre:!0},[s._v("autosize")]),s._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mixed-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Mixed input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of input")]),a("td",[s._v("string")]),a("td",[s._v("text / textarea")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("maximum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("minimum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder of Input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether to show clear button")]),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 Input is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input, works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is not 'textarea'")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("prefix icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("suffix-icon")]),a("td",[s._v("suffix icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("number of rows of textarea, only works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'textarea'")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("whether textarea has an adaptive height, only works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean / object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("auto-complete")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("on/off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("readonly")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("max")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("min")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("step")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("control the resizability")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("autofocus")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("form")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("tabindex")]),a("td",[s._v("input tabindex")]),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:"input-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input slots")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("prefix")]),a("td",[s._v("content as Input prefix, only works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'text'")])]),a("tr",[a("td",[s._v("suffix")]),a("td",[s._v("content as Input suffix, only works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'text'")])]),a("tr",[a("td",[s._v("prepend")]),a("td",[s._v("content to prepend before Input, only works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'text'")])]),a("tr",[a("td",[s._v("append")]),a("td",[s._v("content to append after Input, only works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'text'")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the icon inside Input value change")]),a("td",[s._v("(value: string | number)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("the placeholder of Autocomplete")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Autocomplete is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value-key")]),a("td",[s._v("key name of the input suggestion object for display")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("fetch-suggestions")]),a("td",[s._v("a method to fetch input suggestions. When suggestions are ready, invoke "),a("code",{pre:!0},[s._v("callback(data:[])")]),s._v(" to return them to Autocomplete")]),a("td",[s._v("Function(queryString, callback)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for autocomplete's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("trigger-on-focus")]),a("td",[s._v("whether show suggestions when input focus")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("select-when-unmatched")]),a("td",[s._v("whether to emit a "),a("code",{pre:!0},[s._v("select")]),s._v(" event on enter when there is no autocomplete match")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("prefix icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("suffix-icon")]),a("td",[s._v("suffix icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete slots")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("prefix")]),a("td",[s._v("content as Input prefix")])]),a("tr",[a("td",[s._v("suffix")]),a("td",[s._v("content as Input suffix")])]),a("tr",[a("td",[s._v("prepend")]),a("td",[s._v("content to prepend before Input")])]),a("tr",[a("td",[s._v("append")]),a("td",[s._v("content to append after Input")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when a suggestion is clicked")]),a("td",[s._v("suggestion being clicked")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1124)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1125),e=a(0),n=e(null,l.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"installation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Installation")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm")]),a("p",[s._v("Installing with npm is recommended and it works seamlessly with "),a("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(".")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),a("p",[s._v("Get the latest version from "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[s._v("unpkg.com/element-ui")]),s._v(" , and import JavaScript and CSS file in your page.")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import CSS --\x3e")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("link")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rel")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"stylesheet"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/theme-chalk/index.css"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import JavaScript --\x3e")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),a("div",{staticClass:"tip"},[a("p",[s._v("We recommend our users to lock Element's version when using CDN. Please refer to "),a("a",{attrs:{href:"https://unpkg.com"}},[s._v("unpkg.com")]),s._v(" for more information.")])]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),a("p",[s._v("If you are using CDN, a hello-world page is easy with Element. "),a("a",{attrs:{href:"https://jsfiddle.net/hzfpyvg6/14/"}},[s._v("Online Demo")])]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-meta"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("html")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("head")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("meta")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("charset")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import CSS --\x3e")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("link")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rel")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"stylesheet"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/theme-chalk/index.css"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("body")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"app"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"visible = true"')]),s._v(">")]),s._v("Button"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"visible"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Hello world"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Try Element"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import Vue before Element --\x3e")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import JavaScript --\x3e")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"actionscript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n el: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n data: "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" ")]),s._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" { visible: "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(" }\n }\n })\n ")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),a("p",[s._v("If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.")])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1127)},function(s,t,a){"use strict";function l(s){a(1128)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1130),n=a(0),r=l,v=n(null,e.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var l=a(1129);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("a5269a9c",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-layout .el-row{margin-bottom:20px}.demo-layout .el-row:last-child{margin-bottom:0}.demo-layout .el-col{border-radius:4px}.demo-layout .bg-purple-dark{background:#99a9bf}.demo-layout .bg-purple{background:#d3dce6}.demo-layout .bg-purple-light{background:#e5e9f2}.demo-layout .grid-content{border-radius:4px;min-height:36px}.demo-layout .row-bg{padding:10px 0;background-color:#f9fafc}",""])},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Quickly and easily create layouts with the basic 24-column.")]),s._m(1),a("p",[s._v("Create basic grid layout using columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n    \n\n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("With "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("col")]),s._v(", we can easily manipulate the layout using the "),a("code",[s._v("span")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"24"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Column spacing is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row provides "),a("code",[s._v("gutter")]),s._v(" attribute to specify spacings between columns, and its default value is 0.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can specify column offsets.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n    \n\n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can specify the number of column offset by setting the value of "),a("code",[s._v("offset")]),s._v(" attribute of Col.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use the flex layout to make flexible alignment of columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"center"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"space-between"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"space-around"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-col")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-dark")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-light")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#e5e9f2")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".grid-content")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("min-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("36px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:")]),s._m(8),a("p",[s._v("The classes are:")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-spacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column spacing")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hybrid-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hybrid layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"responsive-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Responsive Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"utility-classes-for-hiding-elements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#utility-classes-for-hiding-elements","aria-hidden":"true"}},[s._v("¶")]),s._v(" Utility classes for hiding elements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-chalk/display.css'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("hidden-xs-only")]),s._v(" - hide when on extra small viewports only")]),a("li",[a("code",{pre:!0},[s._v("hidden-sm-only")]),s._v(" - hide when on small viewports and down")]),a("li",[a("code",{pre:!0},[s._v("hidden-sm-and-down")]),s._v(" - hide when on small viewports and down")]),a("li",[a("code",{pre:!0},[s._v("hidden-sm-and-up")]),s._v(" - hide when on small viewports and up")]),a("li",[a("code",{pre:!0},[s._v("hidden-md-only")]),s._v(" - hide when on medium viewports only")]),a("li",[a("code",{pre:!0},[s._v("hidden-md-and-down")]),s._v(" - hide when on medium viewports and down")]),a("li",[a("code",{pre:!0},[s._v("hidden-md-and-up")]),s._v(" - hide when on medium viewports and up")]),a("li",[a("code",{pre:!0},[s._v("hidden-lg-only")]),s._v(" - hide when on large viewports only")]),a("li",[a("code",{pre:!0},[s._v("hidden-lg-and-down")]),s._v(" - hide when on large viewports and down")]),a("li",[a("code",{pre:!0},[s._v("hidden-lg-and-up")]),s._v(" - hide when on large viewports and up")]),a("li",[a("code",{pre:!0},[s._v("hidden-xl-only")]),s._v(" - hide when on extra large viewports only")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("grid spacing")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("layout mode, you can use flex, works in modern browsers")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("horizontal alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("vertical alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("custom element tag")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("number of column the grid spans")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("24")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("number of spacing on the left side of the grid")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("number of columns that grid moves to the right")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("number of columns that grid moves to the left")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",{pre:!0},[s._v("<768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",{pre:!0},[s._v("≥768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",{pre:!0},[s._v("≥992px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",{pre:!0},[s._v("≥1200px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("xl")]),a("td",[a("code",{pre:!0},[s._v("≥1920px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("custom element tag")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1132)},function(s,t,a){"use strict";function l(s){a(1133)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1135),n=a.n(e),r=a(1136),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1134);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("045e4754",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-loading .el-table{border:none}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var s=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){s.close()},2e3)}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Show animation while loading data.")]),s._m(1),a("p",[s._v("Displays animation in a container (such as a table) while loading data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading: true\n };\n }\n };\n",style:"\n body {\n margin: 0;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loading")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize loading text, loading spinner and background color.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Add attribute "),a("code",[s._v("element-loading-text")]),s._v(" to the element on which "),a("code",[s._v("v-loading")]),s._v(" is bound, and its value will be displayed under the spinner. Similarly, "),a("code",[s._v("element-loading-spinner")]),s._v(" and "),a("code",[s._v("element-loading-background")]),s._v(" are for customizing loading spinner class name and background color.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"loading2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("element-loading-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Loading..."')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("element-loading-spinner")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-loading"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("element-loading-background")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rgba(0, 0, 0, 0.8)"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loading2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Show a full screen animation while loading data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n fullscreenLoading: false\n }\n },\n methods: {\n openFullScreen() {\n this.fullscreenLoading = true;\n setTimeout(() => {\n this.fullscreenLoading = false;\n }, 2000);\n },\n openFullScreen2() {\n const loading = this.$loading({\n lock: true,\n text: 'Loading',\n spinner: 'el-icon-loading',\n background: 'rgba(0, 0, 0, 0.7)'\n });\n setTimeout(() => {\n loading.close();\n }, 2000);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:s.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:s.openFullScreen}},[s._v("\n As a directive\n ")]),a("el-button",{attrs:{type:"primary"},on:{click:s.openFullScreen2}},[s._v("\n As a service\n ")])]],2),a("p",[s._v("When used as a directive, a full screen Loading requires the "),a("code",[s._v("fullscreen")]),s._v(" modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier "),a("code",[s._v("lock")]),s._v(". When used as a service, Loading will be full screen by default.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"openFullScreen"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n As a directive\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"openFullScreen2"')]),s._v(">")]),s._v("\n As a service\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreenLoading")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openFullScreen() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(");\n },\n openFullScreen2() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" loading = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$loading({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("lock")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("spinner")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'el-icon-loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("background")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rgba(0, 0, 0, 0.7)'")]),s._v("\n });\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n loading.close();\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can also invoke Loading with a service. Import Loading service:")]),s._m(5),a("p",[s._v("Invoke it:")]),s._m(6),s._m(7),s._m(8),a("p",[s._v("Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-inside-a-container"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading inside a container")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customization")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"full-screen-loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Full screen loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"service"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[s._v("¶")]),s._v(" Service")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Loading } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[s._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The parameter "),a("code",{pre:!0},[s._v("options")]),s._v(" is the configuration of Loading, and its details can be found in the following table. "),a("code",{pre:!0},[s._v("LoadingService")]),s._v(" returns a Loading instance, and you can close it by invoking its "),a("code",{pre:!0},[s._v("close")]),s._v(" method:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$nextTick("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" { "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// Loading should be closed asynchronously")]),s._v("\n loadingInstance.close();\n});\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Calling the "),a("code",{pre:!0},[s._v("close")]),s._v(" method on any one of them can close this full screen Loading.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is imported entirely, a globally method "),a("code",{pre:!0},[s._v("$loading")]),s._v(" will be registered to Vue.prototype. You can invoke it like this: "),a("code",{pre:!0},[s._v("this.$loading(options)")]),s._v(", and it also returns a Loading instance.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._v("the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to "),a("code",{pre:!0},[s._v("document.querySelector")]),s._v(" to get the corresponding DOM node")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("same as the "),a("code",{pre:!0},[s._v("body")]),s._v(" modifier of "),a("code",{pre:!0},[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("same as the "),a("code",{pre:!0},[s._v("fullscreen")]),s._v(" modifier of "),a("code",{pre:!0},[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("same as the "),a("code",{pre:!0},[s._v("lock")]),s._v(" modifier of "),a("code",{pre:!0},[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("loading text that displays under the spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("spinner")]),a("td",[s._v("class name of the custom spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("background")]),a("td",[s._v("background color of the mask")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Loading")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1138)},function(s,t,a){"use strict";function l(s){a(1139)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1141),n=a.n(e),r=a(1142),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1140);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("6c40d961",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-box.demo-menu .el-menu-demo{padding-left:55px}.demo-box.demo-menu .el-menu-vertical-demo:not(.el-menu--collapse){width:240px;min-height:400px}.demo-box.demo-menu .line{height:1px;background-color:#e0e6ed;margin:35px -24px}.demo-box.demo-menu h5{font-size:14px;color:#8492a6;margin-top:10px}.demo-box.demo-menu .tac{text-align:center}.demo-box.demo-menu .tac .el-menu-vertical-demo{display:inline-block;text-align:left}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{activeIndex:"1",activeIndex2:"1",isCollapse:!0}},methods:{handleOpen:function(s,t){console.log(s,t)},handleClose:function(s,t){console.log(s,t)},handleSelect:function(s,t){console.log(s,t)}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Menu that provides navigation for your website.")]),s._m(1),a("p",[s._v("Top bar NavMenu can be used in a variety of scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Processing Center\n \n \n item one\n item two\n item three\n \n \n item one\n item two\n item three\n \n \n Info\n Orders\n\n
    \n\n Processing Center\n \n \n item one\n item two\n item three\n \n \n item one\n item two\n item three\n \n \n Info\n Orders\n\n\n\n',script:"\n export default {\n data() {\n return {\n activeIndex: '1',\n activeIndex2: '1'\n };\n },\n methods: {\n handleSelect(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")]),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-4-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-4-3"}},[s._v("item three")])],2)],2),a("el-menu-item",{attrs:{index:"3",disabled:""}},[s._v("Info")]),a("el-menu-item",{attrs:{index:"4"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")]),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-4-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-4-3"}},[s._v("item three")])],2)],2),a("el-menu-item",{attrs:{index:"3",disabled:""}},[s._v("Info")]),a("el-menu-item",{attrs:{index:"4"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1)],1),a("p",[s._v("By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides "),a("code",[s._v("background-color")]),s._v(", "),a("code",[s._v("text-color")]),s._v(" and "),a("code",[s._v("active-text-color")]),s._v(" to customize the colors.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"activeIndex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("mode")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-2"')]),s._v(">")]),s._v("item two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("target")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"activeIndex2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("mode")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("background-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#545c64"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#fff"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active-text-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-2"')]),s._v(">")]),s._v("item two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("target")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeIndex")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeIndex2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleSelect(key, keyPath) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Vertical NavMenu with sub-menus.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Default colors
    \n \n \n \n \n item one\n item one\n \n \n item three\n \n \n \n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n \n \n Navigator Four\n \n \n     \n \n
    Custom colors
    \n \n \n \n \n item one\n item one\n \n \n item three\n \n \n \n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n \n \n Navigator Four\n \n \n     \n    \n\n\n',script:"\n export default {\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:12}},[a("h5",[s._v("Default colors")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-location"}),a("span",[s._v("Navigator One")])]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",[s._v("Navigator Two")])]),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),a("span",[s._v("Navigator Three")])]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),a("span",[s._v("Navigator Four")])])],1)],1),a("el-col",{attrs:{span:12}},[a("h5",[s._v("Custom colors")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-location"}),a("span",[s._v("Navigator One")])]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",[s._v("Navigator Two")])]),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),a("span",[s._v("Navigator Three")])]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),a("span",[s._v("Navigator Four")])])],1)],1)],1)],1),a("p",[s._v("You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tac"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("Default colors"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("Custom colors"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("background-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#545c64"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#fff"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active-text-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Vertical NavMenu could be collapsed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n expand\n collapse\n\n\n \n \n \n Group One\n item one\n item two\n \n \n item three\n \n \n item four\n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n \n \n Navigator Four\n \n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n isCollapse: true\n };\n },\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:"\n .el-menu-vertical-demo:not(.el-menu--collapse) {\n width: 200px;\n min-height: 400px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:s.isCollapse,callback:function(t){s.isCollapse=t},expression:"isCollapse"}},[a("el-radio-button",{attrs:{label:!1}},[s._v("expand")]),a("el-radio-button",{attrs:{label:!0}},[s._v("collapse")])],1),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:s.isCollapse},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-location"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator One")])]),a("el-menu-item-group",[a("span",{attrs:{slot:"title"},slot:"title"},[s._v("Group One")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("span",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],1)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator Two")])]),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator Three")])]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator Four")])])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"isCollapse"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("expand"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("collapse"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":collapse")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"isCollapse"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator Two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator Three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator Four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-menu-vertical-demo")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":not(.el-menu--collapse)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("min-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("400px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("isCollapse")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"top-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Top bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"side-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Side bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("menu display mode")]),a("td",[s._v("string")]),a("td",[s._v("horizontal / vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("collapse")]),a("td",[s._v("whether the menu is collapsed (available only in vertical mode)")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("background-color")]),a("td",[s._v("background color of Menu (hex format)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("text color of Menu (hex format)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#303133")])]),a("tr",[a("td",[s._v("active-text-color")]),a("td",[s._v("text color of currently active menu item (hex format)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])]),a("tr",[a("td",[s._v("default-active")]),a("td",[s._v("index of currently active menu")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-openeds")]),a("td",[s._v("array that contains keys of currently active sub-menus")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unique-opened")]),a("td",[s._v("whether only one sub-menu can be active")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-trigger")]),a("td",[s._v("how sub-menus are triggered, only works when "),a("code",{pre:!0},[s._v("mode")]),s._v(" is 'horizontal'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("router")]),a("td",[s._v("whether "),a("code",{pre:!0},[s._v("vue-router")]),s._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("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("open a specific sub-menu")]),a("td",[s._v("index: index of the sub-menu to open")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("close a specific sub-menu")]),a("td",[s._v("index: index of the sub-menu to close")])])])])},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("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for the popup menu")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-timeout")]),a("td",[s._v("timeout before showing a sub-menu")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("hide-timeout")]),a("td",[s._v("timeout before hiding a sub-menu")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the sub-menu is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-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("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-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("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1144)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1145),e=a.n(l),n=a(1146),r=a(0),v=r(e.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";t.__esModule=!0,t.default={methods:{open:function(){var s=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"Delete completed",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"Delete canceled",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("Please input your email","Tips",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"Your email is:"+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"Input canceled"})},200)})},open4:function(){var s=this,t=this.$createElement;this.$msgbox({title:"Message",message:t("p",null,[t("span",null,"Message can be "),t("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(s,t,a){"confirm"===s?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})},open5:function(){this.$alert("This is HTML string","HTML String",{dangerouslyUseHTMLString:!0})},open6:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){s.$message({type:"success",message:"Delete completed"})}).catch(function(){s.$message({type:"info",message:"Delete canceled"})})}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.")]),s._m(1),s._m(2),a("p",[s._v("Alert interrupts user operation until the user confirms.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$alert('This is a message', 'Title', {\n confirmButtonText: 'OK',\n callback: action => {\n this.$message({\n type: 'info',\n message: `action: ${ action }`\n });\n }\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Open an alert by calling the "),a("code",[s._v("$alert")]),s._v(" method. It simulates the system's "),a("code",[s._v("alert")]),s._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),a("code",[s._v("message")]),s._v(" and "),a("code",[s._v("title")]),s._v(" are received. It is worth mentioning that when the box is closed, it returns a "),a("code",[s._v("Promise")]),s._v(" object for further processing. If you are not sure if your target browsers support "),a("code",[s._v("Promise")]),s._v(", you should import a third party polyfill or use callbacks instead like this example.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Title'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("callback")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`action: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${ action }")]),s._v("`")]),s._v("\n });\n }\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Confirm is used to ask users' confirmation.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open2() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning'\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n }); \n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$confirm")]),s._v(" method to open a confirm, and it simulates the system's "),a("code",[s._v("confirm")]),s._v(". We can also highly customize Message Box by passing a third attribute "),a("code",[s._v("options")]),s._v(" which is a literal object. The attribute "),a("code",[s._v("type")]),s._v(" indicates the message type, and it's value can be "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("error")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("warning")]),s._v(". Note that the second attribute "),a("code",[s._v("title")]),s._v(" must be a "),a("code",[s._v("string")]),s._v(", and if it is an "),a("code",[s._v("object")]),s._v(", it will be handled as the attribute "),a("code",[s._v("options")]),s._v(". Here we use "),a("code",[s._v("Promise")]),s._v(" to handle further processing.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open2() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n }).then("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Delete completed'")]),s._v("\n });\n }).catch("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Delete canceled'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Prompt is used when user input is required.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$prompt('Please input your e-mail', 'Tip', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n inputErrorMessage: 'Invalid Email'\n }).then(value => {\n this.$message({\n type: 'success',\n message: 'Your email is:' + value\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Input canceled'\n }); \n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$prompt")]),s._v(" method to open a prompt, and it simulates the system's "),a("code",[s._v("prompt")]),s._v(". You can use "),a("code",[s._v("inputPattern")]),s._v(" parameter to specify your own RegExp pattern. Use "),a("code",[s._v("inputValidator")]),s._v(" to specify validation method, and it should return "),a("code",[s._v("Boolean")]),s._v(" or "),a("code",[s._v("String")]),s._v(". Returning "),a("code",[s._v("false")]),s._v(" or "),a("code",[s._v("String")]),s._v(" means the validation has failed, and the string returned will be used as the "),a("code",[s._v("inputErrorMessage")]),s._v(". In addition, you can customize the placeholder of the input box with "),a("code",[s._v("inputPlaceholder")]),s._v(" parameter.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open3() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$prompt("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input your e-mail'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tip'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inputPattern")]),s._v(": "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inputErrorMessage")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Invalid Email'")]),s._v("\n }).then("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("value")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Your email is:'")]),s._v(" + value\n });\n }).catch("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input canceled'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Can be customized to show various content.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open4() {\n const h = this.$createElement;\n this.$msgbox({\n title: 'Message',\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ]),\n showCancelButton: true,\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n beforeClose: (action, instance, done) => {\n if (action === 'confirm') {\n instance.confirmButtonLoading = true;\n instance.confirmButtonText = 'Loading...';\n setTimeout(() => {\n done();\n setTimeout(() => {\n instance.confirmButtonLoading = false;\n }, 300);\n }, 3000);\n } else {\n done();\n }\n }\n }).then(action => {\n this.$message({\n type: 'info',\n message: 'action: ' + action\n });\n });\n },\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("The three methods mentioned above are repackagings of the "),a("code",[s._v("$msgbox")]),s._v(" method. This example calls "),a("code",[s._v("$msgbox")]),s._v(" method directly using the "),a("code",[s._v("showCancelButton")]),s._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),a("code",[s._v("cancelButtonClass")]),s._v(" to add a custom style and "),a("code",[s._v("cancelButtonText")]),s._v(" to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the "),a("code",[s._v("beforeClose")]),s._v(" attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: "),a("code",[s._v("action")]),s._v(", "),a("code",[s._v("instance")]),s._v(" and "),a("code",[s._v("done")]),s._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),a("code",[s._v("loading")]),s._v(" for confirm button; you can invoke the "),a("code",[s._v("done")]),s._v(" method to close the MessageBox instance (if "),a("code",[s._v("done")]),s._v(" is not called inside "),a("code",[s._v("beforeClose")]),s._v(", the instance will not be closed).")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open4() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$msgbox({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message can be '")]),s._v("),\n h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),a("span",{attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n ]),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showCancelButton")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("beforeClose")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(") {\n instance.confirmButtonLoading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n instance.confirmButtonText = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading...'")]),s._v(";\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n done();\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n instance.confirmButtonLoading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("300")]),s._v(");\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n done();\n }\n }\n }).then("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'action: '")]),s._v(" + action\n });\n });\n },\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$alert('This is HTML string', 'HTML String', {\n dangerouslyUseHTMLString: true\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open5}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Set "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" to true and "),a("code",[s._v("message")]),s._v(" will be treated as an HTML string.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open5() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is HTML string'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'HTML String'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),a("p",[s._v("Content of MessageBox can be centered.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open6() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning',\n center: true\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n });\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open6}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Setting "),a("code",[s._v("center")]),s._v(" to "),a("code",[s._v("true")]),s._v(" will center the content")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open6() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }).then("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Delete completed'")]),s._v("\n });\n }).catch("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Delete canceled'")]),s._v("\n });\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("By design MessageBox provides simulations of system's "),a("code",{pre:!0},[s._v("alert")]),s._v(", "),a("code",{pre:!0},[s._v("confirm")]),s._v(" and "),a("code",{pre:!0},[s._v("prompt")]),s._v("，so it's content should be simple. For more complicated contents, please use Dialog.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"confirm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[s._v("¶")]),s._v(" Confirm")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prompt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prompt")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customization")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"use-html-string"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use HTML String")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" supports HTML string.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("Although "),a("code",{pre:!0},[s._v("message")]),s._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",{pre:!0},[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",{pre:!0},[s._v("message")]),s._v(" to user-provided content.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"centered-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is fully imported, it will add the following global methods for Vue.prototype: "),a("code",{pre:!0},[s._v("$msgbox")]),s._v(", "),a("code",{pre:!0},[s._v("$alert")]),s._v(", "),a("code",{pre:!0},[s._v("$confirm")]),s._v(" and "),a("code",{pre:!0},[s._v("$prompt")]),s._v(". So in a Vue instance you can call "),a("code",{pre:!0},[s._v("MessageBox")]),s._v(" like what we did in this page. The parameters are:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("$msgbox(options)")])]),a("li",[a("code",{pre:!0},[s._v("$alert(message, title, options)")]),s._v(" or "),a("code",{pre:!0},[s._v("$alert(message, options)")])]),a("li",[a("code",{pre:!0},[s._v("$confirm(message, title, options)")]),s._v(" or "),a("code",{pre:!0},[s._v("$confirm(message, options)")])]),a("li",[a("code",{pre:!0},[s._v("$prompt(message, title, options)")]),s._v(" or "),a("code",{pre:!0},[s._v("$prompt(message, options)")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If you prefer importing "),a("code",{pre:!0},[s._v("MessageBox")]),s._v(" on demand:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { MessageBox } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The corresponding methods are: "),a("code",{pre:!0},[s._v("MessageBox")]),s._v(", "),a("code",{pre:!0},[s._v("MessageBox.alert")]),s._v(", "),a("code",{pre:!0},[s._v("MessageBox.confirm")]),s._v(" and "),a("code",{pre:!0},[s._v("MessageBox.prompt")]),s._v(". The parameters are the same as above.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("content of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("whether "),a("code",{pre:!0},[s._v("message")]),s._v(" is treated as HTML string")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type, used for icon display")]),a("td",[s._v("string")]),a("td",[s._v("success / info / warning / error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("callback")]),a("td",[s._v("MessageBox closing callback if you don't prefer Promise")]),a("td",[s._v("function(action), where action can be 'confirm' or 'cancel', and "),a("code",{pre:!0},[s._v("instance")]),s._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show close icon of MessageBox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),a("td",[s._v("function(action, instance, done), where "),a("code",{pre:!0},[s._v("action")]),s._v(" can be 'confirm' or 'cancel'; "),a("code",{pre:!0},[s._v("instance")]),s._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),a("code",{pre:!0},[s._v("done")]),s._v(" is for closing the instance")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lockScroll")]),a("td",[s._v("whether to lock body scroll when MessageBox prompts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showCancelButton")]),a("td",[s._v("whether to show a cancel button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with confirm and prompt)")])]),a("tr",[a("td",[s._v("showConfirmButton")]),a("td",[s._v("whether to show a confirm button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("cancelButtonText")]),a("td",[s._v("text content of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Cancel")])]),a("tr",[a("td",[s._v("confirmButtonText")]),a("td",[s._v("text content of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OK")])]),a("tr",[a("td",[s._v("cancelButtonClass")]),a("td",[s._v("custom class name of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("confirmButtonClass")]),a("td",[s._v("custom class name of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closeOnClickModal")]),a("td",[s._v("whether MessageBox can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("closeOnPressEscape")]),a("td",[s._v("whether MessageBox can be closed by pressing the ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("closeOnHashChange")]),a("td",[s._v("whether to close MessageBox when hash changes")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showInput")]),a("td",[s._v("whether to show an input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with prompt)")])]),a("tr",[a("td",[s._v("inputPlaceholder")]),a("td",[s._v("placeholder of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputType")]),a("td",[s._v("type of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("inputValue")]),a("td",[s._v("initial value of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputPattern")]),a("td",[s._v("regexp for the input")]),a("td",[s._v("regexp")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValidator")]),a("td",[s._v("validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputErrorMessage")]),a("td",[s._v("error message when validation fails")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Illegal input")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to align the content in center")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("roundButton")]),a("td",[s._v("whether to use round button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1148)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1149),e=a.n(l),n=a(1150),r=a(0),v=r(e.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";s.exports={methods:{open:function(){this.$message("This is a message.")},openVn:function(){var s=this.$createElement;this.$message({message:s("p",null,[s("span",null,"Message can be "),s("i",{style:"color: teal"},"VNode")])})},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")},open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})},openCenter:function(){this.$message({message:"Centered text",center:!0})},openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"This is HTML string"})}}}},function(s,t,a){"use strict";var l=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:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('This is a message.');\n },\n \n openVn() {\n const h = this.$createElement;\n this.$message({\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ])\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("Show message")]),a("el-button",{attrs:{plain:!0},on:{click:s.openVn}},[s._v("VNode")])]],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 or a VNode as parameter, and it will be shown as the main body.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("Show message"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"openVn"')]),s._v(">")]),s._v("VNode"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v(");\n },\n \n openVn() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message can be '")]),s._v("),\n h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),a("span",{attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n ])\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[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:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('This is a message.');\n },\n open2() {\n this.$message({\n message: 'Congrats, this is a success message.',\n type: 'success'\n });\n },\n\n open3() {\n this.$message({\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open4() {\n this.$message.error('Oops, this is a error message.');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("error")])]],2),a("p",[s._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),a("code",[s._v("type")]),s._v(" can define different types, and its default is "),a("code",[s._v("info")]),s._v(". In such cases the main body is passed in as the value of "),a("code",[s._v("message")]),s._v(". Also, we have registered methods for different types, so you can directly call it without passing a type like "),a("code",[s._v("open4")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("message"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("error"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v(");\n },\n open2() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open3() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open4() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Oops, this is a error message.'")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("A close button can be added.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$message({\n showClose: true,\n message: 'This is a message.'\n });\n },\n\n open6() {\n this.$message({\n showClose: true,\n message: 'Congrats, this is a success message.',\n type: 'success'\n });\n },\n\n open7() {\n this.$message({\n showClose: true,\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open8() {\n this.$message({\n showClose: true,\n message: 'Oops, this is a error message.',\n type: 'error'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("error")])]],2),a("p",[s._v("A default Message cannot be closed manually. If you need a closable message, you can set "),a("code",[s._v("showClose")]),s._v(" field. Besides, same as notification, message has a controllable "),a("code",[s._v("duration")]),s._v(". Default duration is 3000 ms, and it won't disappear when set to "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("message"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open8"')]),s._v(">")]),s._v("error"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open5() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v("\n });\n },\n\n open6() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open7() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open8() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Oops, this is a error message.'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'error'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n openCenter() {\n this.$message({\n message: 'Centered text',\n center: true\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.openCenter}},[s._v("Centered text")])]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"openCenter"')]),s._v(">")]),s._v("Centered text"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openCenter() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Centered text'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n openHTML() {\n this.$message({\n dangerouslyUseHTMLString: true,\n message: 'This is HTML string'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.openHTML}},[s._v("Use HTML String")])]],2),a("p",[s._v("Set "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" to true and "),a("code",[s._v("message")]),s._v(" will be treated as an HTML string.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"openHTML"')]),s._v(">")]),s._v("Use HTML String"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openHTML() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is HTML string'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"closable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Closable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"centered-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use the "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute to center the text.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"use-html-string"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use HTML string")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" supports HTML string.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("Although "),a("code",{pre:!0},[s._v("message")]),s._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",{pre:!0},[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",{pre:!0},[s._v("message")]),s._v(" to user-provided content.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",{pre:!0},[s._v("$message")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",{pre:!0},[s._v("Message")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",{pre:!0},[s._v("Message")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Message } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",{pre:!0},[s._v("Message(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",{pre:!0},[s._v("Message.success(options)")]),s._v(". You can call "),a("code",{pre:!0},[s._v("Message.closeAll()")]),s._v(" to manually close all the instances.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("message text")]),a("td",[s._v("string / VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class, overrides "),a("code",{pre:!0},[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("whether "),a("code",{pre:!0},[s._v("message")]),s._v(" is treated as HTML string")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Message")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to center the text")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed with the message instance as the parameter")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Message")]),s._v(" and "),a("code",{pre:!0},[s._v("this.$message")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",{pre:!0},[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Message")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1152)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1153),e=a.n(l),n=a(1154),r=a(0),v=r(e.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"Title",message:s("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})},open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})},open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})},open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})},open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"This is HTML string"})},open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})},onClose:function(){console.log("Notification is closed")}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays a global notification message at a corner of the page.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n const h = this.$createElement;\n\n this.$notify({\n title: 'Title',\n message: h('i', { style: 'color: teal' }, 'This is a reminder')\n });\n },\n\n open2() {\n this.$notify({\n title: 'Prompt',\n message: 'This is a message that does not automatically close',\n duration: 0\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n Closes automatically\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n Won't close automatically\n ")])]],2),a("p",[s._v("Element has registered the "),a("code",[s._v("$notify")]),s._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),a("code",[s._v("title")]),s._v(" field and the"),a("code",[s._v("message")]),s._v(" field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting "),a("code",[s._v("duration")]),s._v(" you can control its duration. Specifically, if set to "),a("code",[s._v("0")]),s._v(", it will not close automatically. Note that "),a("code",[s._v("duration")]),s._v(" receives a "),a("code",[s._v("Number")]),s._v(" in milliseconds.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("\n Closes automatically\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("\n Won't close automatically\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Title'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a reminder'")]),s._v(")\n });\n },\n\n open2() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Prompt'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message that does not automatically close'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("duration")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("We provide four types: success, warning, info and error.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$notify({\n title: 'Success',\n message: 'This is a success message',\n type: 'success'\n });\n },\n\n open4() {\n this.$notify({\n title: 'Warning',\n message: 'This is a warning message',\n type: 'warning'\n });\n },\n\n open5() {\n this.$notify.info({\n title: 'Info',\n message: 'This is an info message'\n });\n },\n\n open6() {\n this.$notify.error({\n title: 'Error',\n message: 'This is an error message'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n Success\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n Warning\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n Info\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n Error\n ")])]],2),a("p",[s._v("Element provides four notification types: "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("warning")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("error")]),s._v(". They are set by the "),a("code",[s._v("type")]),s._v(" field, and other values will be ignored. We also registered methods for these types that can be invoked directly like "),a("code",[s._v("open5")]),s._v(" and "),a("code",[s._v("open6")]),s._v(" without passing a "),a("code",[s._v("type")]),s._v(" field.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("\n Success\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("\n Warning\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("\n Info\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("\n Error\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open3() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Success'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a success message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open4() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a warning message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open5() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.info({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is an info message'")]),s._v("\n });\n },\n\n open6() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.error({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Error'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is an error message'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Notification can emerge from any corner you like.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open7() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top right corner'\n });\n },\n\n open8() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom right corner',\n position: 'bottom-right'\n });\n },\n\n open9() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom left corner',\n position: 'bottom-left'\n });\n },\n\n open10() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top left corner',\n position: 'top-left'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n Top Right\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open8}},[s._v("\n Bottom Right\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open9}},[s._v("\n Bottom Left\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open10}},[s._v("\n Top Left\n ")])]],2),a("p",[s._v("The "),a("code",[s._v("position")]),s._v(" attribute defines which corner Notification slides in. It can be "),a("code",[s._v("top-right")]),s._v(", "),a("code",[s._v("top-left")]),s._v(", "),a("code",[s._v("bottom-right")]),s._v(" or "),a("code",[s._v("bottom-left")]),s._v(". Defaults to "),a("code",[s._v("top-right")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("\n Top Right\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open8"')]),s._v(">")]),s._v("\n Bottom Right\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open9"')]),s._v(">")]),s._v("\n Bottom Left\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open10"')]),s._v(">")]),s._v("\n Top Left\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open7() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the top right corner'")]),s._v("\n });\n },\n\n open8() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the bottom right corner'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'bottom-right'")]),s._v("\n });\n },\n\n open9() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the bottom left corner'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'bottom-left'")]),s._v("\n });\n },\n\n open10() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the top left corner'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top-left'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Customize Notification's offset from the edge of the screen.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open11() {\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",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open11}},[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 edge of the screen. Note that every Notification instance of the same moment should have the same offset.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open11"')]),s._v(">")]),s._v("\n Notification with offset\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open11() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.success({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Success'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a success message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("offset")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open12() {\n this.$notify({\n title: 'HTML String',\n dangerouslyUseHTMLString: true,\n message: 'This is HTML string'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open12}},[s._v("\n Use HTML String\n ")])]],2),a("p",[s._v("Set "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" to true and "),a("code",[s._v("message")]),s._v(" will be treated as an HTML string.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open12"')]),s._v(">")]),s._v("\n Use HTML String\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open12() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'HTML String'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is HTML string'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("p",[s._v("It is possible to hide the close button")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open13() {\n this.$notify.success({\n title: 'Info',\n message: 'This is a message without close button',\n showClose: false\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open13}},[s._v("\n Hide close button\n ")])]],2),a("p",[s._v("Set the "),a("code",[s._v("showClose")]),s._v(" attribute to "),a("code",[s._v("false")]),s._v(" so the notification cannot be closed by the user.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open13"')]),s._v(">")]),s._v("\n Hide close button\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open13() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.success({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message without close button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" With types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-position"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-position","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom position")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" With offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"use-html-string"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use HTML string")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" supports HTML string.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("Although "),a("code",{pre:!0},[s._v("message")]),s._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",{pre:!0},[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",{pre:!0},[s._v("message")]),s._v(" to user-provided content.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hide-close-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hide-close-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hide close button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",{pre:!0},[s._v("$notify")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",{pre:!0},[s._v("Notification")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",{pre:!0},[s._v("Notification")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Notification } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",{pre:!0},[s._v("Notification(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",{pre:!0},[s._v("Notification.success(options)")]),s._v(". You can call "),a("code",{pre:!0},[s._v("Notification.closeAll()")]),s._v(" to manually close all the instances.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("description text")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("whether "),a("code",{pre:!0},[s._v("message")]),s._v(" is treated as HTML string")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("notification type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class. It will be overridden by "),a("code",{pre:!0},[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Notification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("duration before close. It will not automatically close if set 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("position")]),a("td",[s._v("custom position")]),a("td",[s._v("string")]),a("td",[s._v("top-right/top-left/bottom-right/bottom-left")]),a("td",[s._v("top-right")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function when notification clicked")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Notification")]),s._v(" and "),a("code",{pre:!0},[s._v("this.$notify")]),s._v(" returns the current Notification instance. To manually close the instance, you can call "),a("code",{pre:!0},[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Notification")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1156)},function(s,t,a){"use strict";function l(s){a(1157)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1159),n=a.n(e),r=a(1160),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1158);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("d9e1f8f8",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-pagination .source.first{padding:0}.demo-pagination .first .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-pagination .first .block:last-child{border-right:none}.demo-pagination .first .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-pagination .source.last{padding:0}.demo-pagination .last .block{padding:30px 24px;border-bottom:1px solid #eff2f6}.demo-pagination .last .block:last-child{border-bottom:none}.demo-pagination .last .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-pagination .last .demonstration+.el-pagination{float:right;width:70%;margin:5px 20px 0 0}",""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(4);t.default={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+" items per page")},handleCurrentChange:function(s){console.log("current page: "+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,l.addClass)(t,"first"),(0,l.addClass)(a,"last")})}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If you have too much data to display in one page, use pagination.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n When you have few pages\n \n \n
    \n
    \n When you have more than 7 pages\n \n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have few pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have more than 7 pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("Set "),a("code",[s._v("layout")]),s._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),a("code",[s._v("prev")]),s._v(" (a button navigating to the previous page), "),a("code",[s._v("next")]),s._v(" (a button navigating to the next page), "),a("code",[s._v("pager")]),s._v(" (page list), "),a("code",[s._v("jumper")]),s._v(" (a jump-to input), "),a("code",[s._v("total")]),s._v(" (total item count), "),a("code",[s._v("size")]),s._v(" (a select to determine page size) and "),a("code",[s._v("->")]),s._v("(every element after this symbol will be pulled to the right).")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have few pages"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have more than 7 pages"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1),a("p",[s._v("Set the "),a("code",[s._v("background")]),s._v(" attribute and the buttons will have a background color.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("background")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Use small pagination in the case of limited space.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("Just set the "),a("code",[s._v("small")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the Pagination becomes smaller.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("small")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Add more modules based on your scenario.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n methods: {\n handleSizeChange(val) {\n console.log(`${val} items per page`);\n },\n handleCurrentChange(val) {\n console.log(`current page: ${val}`);\n }\n },\n data() {\n return {\n currentPage1: 5,\n currentPage2: 5,\n currentPage3: 5,\n currentPage4: 4\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Total item count")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Change page size")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage2=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Jump to")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("All combined")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage4=t}}})],1)]],2),a("p",[s._v("This example is a complete use case. It uses "),a("code",[s._v("size-change")]),s._v(" and "),a("code",[s._v("current-change")]),s._v(" event to handle page size changes and current page changes. "),a("code",[s._v("page-sizes")]),s._v(" accepts an array of integers, each of which represents a different page size in the "),a("code",[s._v("sizes")]),s._v(" select options, e.g. "),a("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"total, prev, pager, next"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Change page size"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-sizes")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sizes, prev, pager, next"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Jump to"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next, jumper"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("All combined"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-sizes")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"400"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleSizeChange(val) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("`"),a("span",{attrs:{class:"hljs-subst"}},[s._v("${val}")]),s._v(" items per page`")]),s._v(");\n },\n handleCurrentChange(val) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("`current page: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${val}")]),s._v("`")]),s._v(");\n }\n },\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage1")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage2")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage4")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"buttons-with-background-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#buttons-with-background-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Buttons with background color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"small-pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Small Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-elements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[s._v("¶")]),s._v(" More elements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("whether to use small pagination")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("background")]),a("td",[s._v("whether the buttons have a background color")]),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",{pre:!0},[s._v("total")]),s._v(" or "),a("code",{pre:!0},[s._v("page-count")]),s._v(" and pages will be displayed; if you need "),a("code",{pre:!0},[s._v("page-sizes")]),s._v(", "),a("code",{pre:!0},[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",{pre:!0},[s._v("sizes")]),s._v(", "),a("code",{pre:!0},[s._v("prev")]),s._v(", "),a("code",{pre:!0},[s._v("pager")]),s._v(", "),a("code",{pre:!0},[s._v("next")]),s._v(", "),a("code",{pre:!0},[s._v("jumper")]),s._v(", "),a("code",{pre:!0},[s._v("->")]),s._v(", "),a("code",{pre:!0},[s._v("total")]),s._v(", "),a("code",{pre:!0},[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("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]")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for the page size Select's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prev-text")]),a("td",[s._v("text for the prev button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next-text")]),a("td",[s._v("text for the next button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("triggers when "),a("code",{pre:!0},[s._v("page-size")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",{pre:!0},[s._v("page-size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when "),a("code",{pre:!0},[s._v("current-page")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",{pre:!0},[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",{pre:!0},[s._v("slot")]),s._v(" in "),a("code",{pre:!0},[s._v("layout")])])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1162)},function(s,t,a){"use strict";function l(s){a(1163)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1165),n=a.n(e),r=a(1166),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1164);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("ff9ddeaa",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-box.demo-popover .el-popover+.el-popover{margin-left:10px}.demo-box.demo-popover .el-input{width:360px}.demo-box.demo-popover .el-button{margin-left:10px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{visible2:!1,gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}],gridData2:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City",$info:!0},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City",$positive:!0}],gridData3:[{tag:"Home",date:"2016-05-03",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-02",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-04",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-01",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-08",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-06",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-07",name:"Jack",address:"New York City"}],singleSelection:{},multipleSelection:[],model:""}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\nHover to activate\nClick to activate\n\n Focus to activate\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("Hover to activate")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("Click to activate")]),a("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[s._v("Focus to activate")])],1)],1),a("p",[s._v("Add "),a("code",[s._v("ref")]),s._v(" in your popover, then in your button, use "),a("code",[s._v("v-popover")]),s._v(" directive to link the button and the popover. The attribute "),a("code",[s._v("trigger")]),s._v(" is used to define how popover is triggered: "),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" or "),a("code",[s._v("focus")]),s._v(". Alternatively, you can specify reference using a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"popover1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top-start"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"popover2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover1")]),s._v(">")]),s._v("Hover to activate"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover2")]),s._v(">")]),s._v("Click to activate"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"focus"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(">")]),s._v("Focus to activate"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Other components can be nested in popover. Following is an example of nested table.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n\n\nClick to activate\n\n\n',script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-04',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-01',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-03',\n name: 'Jack',\n address: 'New York City'\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("Click to activate")])],1),a("p",[s._v("replace the "),a("code",[s._v("content")]),s._v(" attribute with a default "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"popover4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"400"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover4")]),s._v(">")]),s._v("Click to activate"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("gridData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n

    Are you sure to delete this?

    \n
    \n cancel\n confirm\n
    \n    \n\nDelete\n\n\n',script:"\n export default {\n data() {\n return {\n visible2: false,\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-popover",{ref:"popover5",attrs:{placement:"top",width:"160"},model:{value:s.visible2,callback:function(t){s.visible2=t},expression:"visible2"}},[a("p",[s._v("Are you sure to delete this?")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("cancel")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("confirm")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("Delete")])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"popover5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"160"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"visible2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Are you sure to delete this?"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"visible2 = false"')]),s._v(">")]),s._v("cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"visible2 = false"')]),s._v(">")]),s._v("confirm"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover5")]),s._v(">")]),s._v("Delete"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("visible2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Similar to Tooltip, Popover is also built with "),a("code",{pre:!0},[s._v("Vue-popper")]),s._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-information"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested information")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-operation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested operation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how the popover is triggered")]),a("td",[s._v("string")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("popover title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("popover content, can be replaced with a default "),a("code",{pre:!0},[s._v("slot")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("popover width")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("Min width 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("popover placement")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Popover is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("whether popover is visible")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("popover offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("popover transition animation")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[s._v("parameters for "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[s._v("object")]),a("td",[s._v("please refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[a("code",{pre:!0},[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for popover")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance when "),a("code",{pre:!0},[s._v("trigger")]),s._v(" is hover, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("text content of popover")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("HTML element that triggers popover")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("triggers when popover shows")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("triggers when popover hides")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1168)},function(s,t,a){"use strict";function l(s){a(1169)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1171),n=a(0),r=l,v=n(null,e.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var l=a(1170);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("2b1e472c",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-box.demo-progress .el-progress--line{margin-bottom:15px;width:350px}.demo-box.demo-progress .el-progress--circle{margin-right:15px}",""])},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:100,status:"success"}}),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1),a("p",[s._v("Use "),a("code",[s._v("percentage")]),s._v(" attribute to set the percentage. It's "),a("strong",[s._v("required")]),s._v(" and must be between "),a("code",[s._v("0-100")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[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:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage: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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-progress",{attrs:{type:"circle",percentage:0}}),a("el-progress",{attrs:{type:"circle",percentage:25}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),a("p",[s._v("You can specify "),a("code",[s._v("type")]),s._v(" attribute to "),a("code",[s._v("circle")]),s._v(" to use circular progress bar, and use "),a("code",[s._v("width")]),s._v(" attribute to change the size of circle.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"25"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (external percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (internal percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"circular-progress-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Circular progress bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[s._v("percentage, "),a("strong",[s._v("required")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("the type of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("the width of progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("whether to place the percentage inside progress bar, only works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'line'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("the current status of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("the canvas width of circle progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to show percentage")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1173)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1174),e=a(0),n=e(null,l.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"quick-start"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[s._v("¶")]),s._v(" Quick start")]),a("p",[s._v("This part walks you through the process of using Element in a webpack project.")]),a("h3",{attrs:{id:"use-starter-kit"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use Starter Kit")]),a("p",[s._v("We provide a general "),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[s._v("project template")]),s._v(" for you. For Laravel users, we also have a "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[s._v("template")]),s._v(". You can download and use them directly.")]),a("p",[s._v("If you prefer not to use them, please read the following.")]),a("h3",{attrs:{id:"use-vue-cli"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use vue-cli")]),a("p",[s._v("We can also start a project using "),a("a",{attrs:{href:"https://github.com/vuejs/vue-cli"}},[s._v("vue-cli")]),s._v(":")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("> npm i -g vue-cli\n> mkdir my-project && cd my-project\n> vue init webpack\n> npm i && npm i element-ui\n")])]),a("h3",{attrs:{id:"import-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import Element")]),a("p",[s._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),a("h4",{attrs:{id:"fully-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fully import")]),a("p",[s._v("In main.js:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-chalk/index.css'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),a("h4",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")]),a("p",[s._v("With the help of "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v(", we can import components we actually need, making the project smaller than otherwise.")]),a("p",[s._v("First, install babel-plugin-component:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-bash"}},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("Then edit .babelrc:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-json"}},[s._v("{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"presets"')]),s._v(": [\n ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"es2015"')]),s._v(", { "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"modules"')]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(" }]\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [["),a("span",{attrs:{class:"hljs-string"}},[s._v('"component"')]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"libraryName"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"element-ui"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"theme-chalk"')]),s._v("\n }\n ]]\n}\n")])]),a("p",[s._v("Next, if you need Button and Select, edit main.js:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("Full example (Component list reference "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[s._v("components.json")]),s._v(")")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n Pagination,\n Dialog,\n Autocomplete,\n Dropdown,\n DropdownMenu,\n DropdownItem,\n Menu,\n Submenu,\n MenuItem,\n MenuItemGroup,\n Input,\n InputNumber,\n Radio,\n RadioGroup,\n RadioButton,\n Checkbox,\n CheckboxButton,\n CheckboxGroup,\n Switch,\n Select,\n Option,\n OptionGroup,\n Button,\n ButtonGroup,\n Table,\n TableColumn,\n DatePicker,\n TimeSelect,\n TimePicker,\n Popover,\n Tooltip,\n Breadcrumb,\n BreadcrumbItem,\n Form,\n FormItem,\n Tabs,\n TabPane,\n Tag,\n Tree,\n Alert,\n Slider,\n Icon,\n Row,\n Col,\n Upload,\n Progress,\n Badge,\n Card,\n Rate,\n Steps,\n Step,\n Carousel,\n CarouselItem,\n Collapse,\n CollapseItem,\n Cascader,\n ColorPicker,\n Transfer,\n Container,\n Header,\n Aside,\n Main,\n Footer,\n Loading,\n MessageBox,\n Message,\n Notification\n} "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n\nVue.use(Pagination)\nVue.use(Dialog)\nVue.use(Autocomplete)\nVue.use(Dropdown)\nVue.use(DropdownMenu)\nVue.use(DropdownItem)\nVue.use(Menu)\nVue.use(Submenu)\nVue.use(MenuItem)\nVue.use(MenuItemGroup)\nVue.use(Input)\nVue.use(InputNumber)\nVue.use(Radio)\nVue.use(RadioGroup)\nVue.use(RadioButton)\nVue.use(Checkbox)\nVue.use(CheckboxButton)\nVue.use(CheckboxGroup)\nVue.use(Switch)\nVue.use(Select)\nVue.use(Option)\nVue.use(OptionGroup)\nVue.use(Button)\nVue.use(ButtonGroup)\nVue.use(Table)\nVue.use(TableColumn)\nVue.use(DatePicker)\nVue.use(TimeSelect)\nVue.use(TimePicker)\nVue.use(Popover)\nVue.use(Tooltip)\nVue.use(Breadcrumb)\nVue.use(BreadcrumbItem)\nVue.use(Form)\nVue.use(FormItem)\nVue.use(Tabs)\nVue.use(TabPane)\nVue.use(Tag)\nVue.use(Tree)\nVue.use(Alert)\nVue.use(Slider)\nVue.use(Icon)\nVue.use(Row)\nVue.use(Col)\nVue.use(Upload)\nVue.use(Progress)\nVue.use(Badge)\nVue.use(Card)\nVue.use(Rate)\nVue.use(Steps)\nVue.use(Step)\nVue.use(Carousel)\nVue.use(CarouselItem)\nVue.use(Collapse)\nVue.use(CollapseItem)\nVue.use(Cascader)\nVue.use(ColorPicker)\nVue.use(Container)\nVue.use(Header)\nVue.use(Aside)\nVue.use(Main)\nVue.use(Footer)\n\nVue.use(Loading.directive)\n\nVue.prototype.$loading = Loading.service\nVue.prototype.$msgbox = MessageBox\nVue.prototype.$alert = MessageBox.alert\nVue.prototype.$confirm = MessageBox.confirm\nVue.prototype.$prompt = MessageBox.prompt\nVue.prototype.$notify = Notification\nVue.prototype.$message = Message\n")])]),a("h3",{attrs:{id:"global-config"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-config","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global config")]),a("p",[s._v("When importing Element, you can define a global config object. For now this object has only one property: "),a("code",{pre:!0},[s._v("size")]),s._v(", which sets the default size for all components:")]),a("p",[s._v("Fully import Element：")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-JS"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\nVue.use(Element, { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'small'")]),s._v(" })\n")])]),a("p",[s._v("Partial import Element：")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-JS"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n\nVue.prototype.$ELEMENT = { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'small'")]),s._v(" }\nVue.use(Button)\n")])]),a("p",[s._v("With the above config, the default size of all components that have size attribute will be 'small'.")]),a("h3",{attrs:{id:"start-coding"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[s._v("¶")]),s._v(" Start coding")]),a("p",[s._v("Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-bash"}},[s._v("npm run dev\n")])]),a("p",[s._v("Build:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-bash"}},[s._v("npm run build\n")])]),a("p",[s._v("Please refer to each component's documentation to learn how to use them.")])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1176)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1177),e=a.n(l),n=a(1178),r=a(0),v=r(e.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";s.exports={data:function(){return{radio:"1",radio1:"selected and disabled",radio2:3,radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York",radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Single selection among multiple options.")]),s._m(1),a("p",[s._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio",{attrs:{label:"1"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("Option B")])]],2),a("p",[s._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),a("code",[s._v("v-model")]),s._v(". It equals to the value of "),a("code",[s._v("label")]),s._v(" of the chosen radio. The type of "),a("code",[s._v("label")]),s._v(" is "),a("code",[s._v("String")]),s._v(", "),a("code",[s._v("Number")]),s._v(" or "),a("code",[s._v("Boolean")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio1: 'selected and disabled'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("Option A")]),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("Option B")])]],2),a("p",[s._v("You just need to add the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selected and disabled"')]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'selected and disabled'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Suitable for choosing from some mutually exclusive options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Option A\n Option B\n Option C\n\n\n\n',script:"\n export default {\n data () {\n return {\n radio2: 3\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-radio-group",{model:{value:s.radio2,callback:function(t){s.radio2=t},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[s._v("Option A")]),a("el-radio",{attrs:{label:6}},[s._v("Option B")]),a("el-radio",{attrs:{label:9}},[s._v("Option C")])],1)],1),a("p",[s._v("Combine "),a("code",[s._v("el-radio-group")]),s._v(" with "),a("code",[s._v("el-radio")]),s._v(" to display a radio group. Bind a variable with "),a("code",[s._v("v-model")]),s._v(" of "),a("code",[s._v("el-radio-group")]),s._v(" element and set label value in "),a("code",[s._v("el-radio")]),s._v(". It also provides "),a("code",[s._v("change")]),s._v(" event with the current value as its parameter.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(">")]),s._v("Option C"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio2")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Radio with button styles.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio3: 'New York',\n radio4: 'New York',\n radio5: 'New York',\n radio6: 'New York'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-radio-group",{model:{value:s.radio3,callback:function(t){s.radio3=t},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:s.radio4,callback:function(t){s.radio4=t},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.radio5,callback:function(t){s.radio5=t},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington",disabled:""}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:s.radio6,callback:function(t){s.radio6=t},expression:"radio6"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2),a("p",[s._v("You just need to change "),a("code",[s._v("el-radio")]),s._v(" element into "),a("code",[s._v("el-radio-button")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio5"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio5")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio6")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio7: '1',\n radio8: '1',\n radio9: '1',\n radio10: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-radio",{attrs:{label:"1",border:""},model:{value:s.radio7,callback:function(t){s.radio7=t},expression:"radio7"}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:""},model:{value:s.radio7,callback:function(t){s.radio7=t},expression:"radio7"}},[s._v("Option B")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:s.radio8,callback:function(t){s.radio8=t},expression:"radio8"}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:s.radio8,callback:function(t){s.radio8=t},expression:"radio8"}},[s._v("Option B")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.radio9,callback:function(t){s.radio9=t},expression:"radio9"}},[a("el-radio",{attrs:{label:"1",border:""}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:"",disabled:""}},[s._v("Option B")])],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:s.radio10,callback:function(t){s.radio10=t},expression:"radio10"}},[a("el-radio",{attrs:{label:"1",border:""}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:""}},[s._v("Option B")])],1)],1)]],2),a("p",[s._v("The "),a("code",[s._v("border")]),s._v(" attribute adds a border to Radios.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio7"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio7"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio9"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio10"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio7")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio8")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio9")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio10")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute is used to disable the radio.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio button group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-borders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[s._v("¶")]),s._v(" With borders")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of Radio")]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether to add a border around Radio")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the Radio, only works when "),a("code",{pre:!0},[s._v("border")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of radio buttons or bordered radios")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the nesting radios are disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1180)},function(s,t,a){"use strict";function l(s){a(1181)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1183),n=a.n(e),r=a(1184),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1182);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("da19778e",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-rate .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-rate .block:last-child{border-right:none}.demo-rate .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){document.querySelector(".source").style.padding="0"})}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for rating")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n \n
    \n
    \n Color for different levels\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value1: null,\n value2: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-rate",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]),a("p",[s._v("Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the "),a("code",[s._v("colors")]),s._v(" attribute, and their two thresholds can be defined by "),a("code",[s._v("low-threshold")]),s._v(" and "),a("code",[s._v("high-threshold")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Color for different levels"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":colors")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Using text to indicate rating score")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value3: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("p",[s._v("Add attribute "),a("code",[s._v("show-text")]),s._v(" to display text at the right of Rate. You can assign texts for different scores using "),a("code",[s._v("texts")]),s._v(". "),a("code",[s._v("texts")]),s._v(" is an array whose length should be equal to the max score "),a("code",[s._v("max")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":texts")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['oops', 'disappointed', 'normal', 'good', 'great']\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can use different icons to distinguish different rate components.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value4: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":icon-classes")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("void-icon-class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"icon-rate-face-off"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":colors")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[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:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n value5: 3.7\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} 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-score")]),s._v(" to display the rating score at the right side. Additionally, you can use attribute "),a("code",[s._v("score-template")]),s._v(" to provide a score 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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-score")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ff9900"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("score-template")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"{value} points"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3.7")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" With text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" More icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"read-only"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[s._v("¶")]),s._v(" Read-only")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("max rating score")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Rate is read-only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("whether picking half start is allowed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("threshold value between low and medium level. The value itself will be included in low level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("threshold value between medium and high level. The value itself will be included in high level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("color of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("color of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("class name of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("class name of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to display texts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-score")]),a("td",[s._v("whether to display current score. show-score and show-text cannot be true at the same time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("color of texts")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("text array")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("score-template")]),a("td",[s._v("score template")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("Triggers when rate value is changed")]),a("td",[s._v("value after changing")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1186)},function(s,t,a){"use strict";function l(s){a(1187)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1189),n=a.n(e),r=a(1190),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1188);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("0f47b24d",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-select .el-select{width:240px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{list:null,options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City Name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:[],value10:[],value11:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(s){return{value:s,label:s}})},methods:{remoteMethod:function(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value,callback:function(t){s.value=t},expression:"value"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v(" is the value of "),a("code",[s._v("el-option")]),s._v(" that is currently selected.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2',\n disabled: true\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value2: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}},s._l(s.options2,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("disabled")]),s._v(" in "),a("code",[s._v("el-option")]),s._v(" to "),a("code",[s._v("true")]),s._v(" to disable this option.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Disable the whole component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value3: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("disabled")]),s._v(" of "),a("code",[s._v("el-select")]),s._v(" to make it disabled.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can clear Select using a clear icon.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value4: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("clearable")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" and a clear icon will appear. Note that "),a("code",[s._v("clearable")]),s._v(" is only for single select.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("clearable")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[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:'\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 value11: []\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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}})})),a("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:s.value11,callback:function(t){s.value11=t},expression:"value11"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],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. By default the selected options will be displayed as Tags. You can collapse them to a text by using "),a("code",[s._v("collapse-tags")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value11"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("collapse-tags")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-left: 20px;"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value11")]),s._v(": []\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("You can customize HTML templates for options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n cities: [{\n value: 'Beijing',\n label: 'Beijing'\n }, {\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Nanjing',\n label: 'Nanjing'\n }, {\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }],\n value6: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}},s._l(s.cities,function(t){return a("el-option",{key:t.value,attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[s._v(s._s(t.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(t.value))])])}))]],2),a("p",[s._v("Insert customized HTML templates into the slot of "),a("code",[s._v("el-option")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in cities"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"float: left"')]),s._v(">")]),s._v("{{ item.label }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),s._v("{{ item.value }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Nanjing'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Nanjing'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Display options in groups.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options3: [{\n label: 'Popular cities',\n options: [{\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Beijing',\n label: 'Beijing'\n }]\n }, {\n label: 'City name',\n options: [{\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }, {\n value: 'Dalian',\n label: 'Dalian'\n }]\n }],\n value7: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}},s._l(s.options3,function(t){return a("el-option-group",{key:t.label,attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("Use "),a("code",[s._v("el-option-group")]),s._v(" to group the options, and its "),a("code",[s._v("label")]),s._v(" attribute stands for the name of the group.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option-group")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"group in options3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"group.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"group.label"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in group.options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popular cities'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'City name'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dalian'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dalian'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("You can filter options for your desired ones.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value8: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-select")]),s._v(" enables filtering. By default, Select will find all the options whose "),a("code",[s._v("label")]),s._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),a("code",[s._v("filter-method")]),s._v(". "),a("code",[s._v("filter-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("Enter keywords and search data from server.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:'\n export default {\n data() {\n return {\n options4: [],\n value9: [],\n list: [],\n loading: false,\n states: ["Alabama", "Alaska", "Arizona",\n "Arkansas", "California", "Colorado",\n "Connecticut", "Delaware", "Florida",\n "Georgia", "Hawaii", "Idaho", "Illinois",\n "Indiana", "Iowa", "Kansas", "Kentucky",\n "Louisiana", "Maine", "Maryland",\n "Massachusetts", "Michigan", "Minnesota",\n "Mississippi", "Missouri", "Montana",\n "Nebraska", "Nevada", "New Hampshire",\n "New Jersey", "New Mexico", "New York",\n "North Carolina", "North Dakota", "Ohio",\n "Oklahoma", "Oregon", "Pennsylvania",\n "Rhode Island", "South Carolina",\n "South Dakota", "Tennessee", "Texas",\n "Utah", "Vermont", "Virginia",\n "Washington", "West Virginia", "Wisconsin",\n "Wyoming"]\n }\n },\n mounted() {\n this.list = this.states.map(item => {\n return { value: item, label: item };\n });\n },\n methods: {\n remoteMethod(query) {\n if (query !== \'\') {\n this.loading = true;\n setTimeout(() => {\n this.loading = false;\n this.options4 = this.list.filter(item => {\n return item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > -1;\n });\n }, 200);\n } else {\n this.options4 = [];\n }\n }\n }\n }\n',style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":s.remoteMethod,loading:s.loading},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}},s._l(s.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("filterable")]),s._v(" and "),a("code",[s._v("remote")]),s._v(" with "),a("code",[s._v("true")]),s._v(" to enable remote search, and you should pass the "),a("code",[s._v("remote-method")]),s._v(". "),a("code",[s._v("remote-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),a("code",[s._v("el-option")]),s._v(" is rendered with the "),a("code",[s._v("v-for")]),s._v(" directive, you should add the "),a("code",[s._v("key")]),s._v(" attribute for "),a("code",[s._v("el-option")]),s._v(". Its value needs to be unique, such as "),a("code",[s._v("item.value")]),s._v(" in the following example.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("remote")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("reserve-keyword")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please enter a keyword"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":remote-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"remoteMethod"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":loading")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options4")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("list")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loading")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("states")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"Alabama"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Alaska"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Arizona"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Arkansas"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"California"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Colorado"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Connecticut"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Delaware"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Florida"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Georgia"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Hawaii"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Idaho"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Illinois"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Indiana"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Iowa"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Kansas"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Kentucky"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Louisiana"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Maine"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Maryland"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Massachusetts"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Michigan"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Minnesota"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Mississippi"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Missouri"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Montana"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Nebraska"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Nevada"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"New Hampshire"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"New Jersey"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"New Mexico"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"North Carolina"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"North Dakota"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Ohio"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Oklahoma"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Oregon"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pennsylvania"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Rhode Island"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"South Carolina"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"South Dakota"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Tennessee"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Texas"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Utah"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Vermont"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Virginia"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"West Virginia"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Wisconsin"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Wyoming"')]),s._v("]\n }\n },\n mounted() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".list = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".states.map("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": item, "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": item };\n });\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n remoteMethod(query) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (query !== "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options4 = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".list.filter("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n });\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("200")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options4 = [];\n }\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Create and select new items that are not included in select options")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options5: [{\n value: 'HTML',\n label: 'HTML'\n }, {\n value: 'CSS',\n label: 'CSS'\n }, {\n value: 'JavaScript',\n label: 'JavaScript'\n }],\n value10: []\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"Choose tags for your article"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}},s._l(s.options5,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("By using the "),a("code",[s._v("allow-create")]),s._v(" attribute, users can create new items by typing in the input box. Note that for "),a("code",[s._v("allow-create")]),s._v(" to work, "),a("code",[s._v("filterable")]),s._v(" must be "),a("code",[s._v("true")]),s._v(". This example also demonstrates "),a("code",[s._v("default-first-option")]),s._v(". When this attribute is set to "),a("code",[s._v("true")]),s._v(", you can select the first option in the current option list by hitting enter without having to navigate with mouse or arrow keys.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("allow-create")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-first-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Choose tags for your article"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options5")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'HTML'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'HTML'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CSS'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CSS'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'JavaScript'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'JavaScript'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": []\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"clearable-single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Clearable single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote Search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"create-new-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[s._v("¶")]),s._v(" Create new items")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("If the binding value of Select is an object, make sure to assign "),a("code",{pre:!0},[s._v("value-key")]),s._v(" as its unique identity key name.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether multiple-select is activated")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Select is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value-key")]),a("td",[s._v("unique identity key name for value, required when value is an object")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether single select can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("collapse-tags")]),a("td",[s._v("whether to collapse tags to a text when multiple selecting")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("multiple-limit")]),a("td",[s._v("maximum number of options user can select when "),a("code",{pre:!0},[s._v("multiple")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v(". No limit when set to 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("the name attribute of select input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("the autocomplete attribute of select input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Select is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-create")]),a("td",[s._v("whether creating new items is allowed. To use this, "),a("code",{pre:!0},[s._v("filterable")]),s._v(" must be true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("remote")]),a("td",[s._v("whether options are loaded from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("remote-method")]),a("td",[s._v("custom remote search method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("whether Select is loading data from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading-text")]),a("td",[s._v("displayed text while loading data from server")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Loading")])]),a("tr",[a("td",[s._v("no-match-text")]),a("td",[s._v("displayed text when no data matches the filtering query")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No matching data")])]),a("tr",[a("td",[s._v("no-data-text")]),a("td",[s._v("displayed text when there is no options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No data")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Select's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-keyword")]),a("td",[s._v("when "),a("code",{pre:!0},[s._v("multiple")]),s._v(" and "),a("code",{pre:!0},[s._v("filter")]),s._v(" is true, whether to reserve current keyword after selecting an option")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-first-option")]),a("td",[s._v("select first matching option on enter key. Use with "),a("code",{pre:!0},[s._v("filterable")]),s._v(" or "),a("code",{pre:!0},[s._v("remote")])]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-append-to-body")]),a("td",[s._v("whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the selected value changes")]),a("td",[s._v("current selected value")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])]),a("tr",[a("td",[s._v("remove-tag")]),a("td",[s._v("triggers when a tag is removed in multiple mode")]),a("td",[s._v("removed tag value")])]),a("tr",[a("td",[s._v("clear")]),a("td",[s._v("triggers when the clear icon is clicked in a clearable Select")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("name of the group")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable all options in this group")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of option")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label of option, same as "),a("code",{pre:!0},[s._v("value")]),s._v(" if omitted")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether option is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("-")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1192)},function(s,t,a){"use strict";function l(s){a(1193)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1195),n=a.n(e),r=a(1196),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1194);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("403e8308",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-box.demo-slider .source{padding:0}.demo-box.demo-slider .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-box.demo-slider .block:last-child{border-bottom:none}.demo-box.demo-slider .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-box.demo-slider .demonstration+.el-slider{float:right;width:70%;margin-right:20px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42,value6:0,value7:0,value8:0,value9:[4,8],value10:0}},methods:{formatTooltip:function(s){return s/100}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Drag the slider within a fixed range.")]),s._m(1),a("p",[s._v("The current value is displayed when the slider is being dragged.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value1: 0,\n value2: 50,\n value3: 36,\n value4: 48,\n value5: 42\n }\n },\n methods: {\n formatTooltip(val) {\n return val / 100;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default value")]),a("el-slider",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Customized initial value")]),a("el-slider",{model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hide Tooltip")]),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Format Tooltip")]),a("el-slider",{attrs:{"format-tooltip":s.formatTooltip},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Disabled")]),a("el-slider",{attrs:{disabled:""},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]],2),a("p",[s._v("Customize the initial value of the slider by setting the binding value.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default value"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Customized initial value"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Hide Tooltip"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":show-tooltip")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Format Tooltip"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":format-tooltip")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formatTooltip"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Disabled"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("36")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("48")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("42")]),s._v("\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n formatTooltip(val) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" val / "),a("span",{attrs:{class:"hljs-number"}},[s._v("100")]),s._v(";\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("The options can be discrete.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value6: 0,\n value7: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints not displayed"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints displayed"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-stops")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Set value via a input box.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value8: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}})],1)]],2),a("p",[s._v("Set the "),a("code",[s._v("show-input")]),s._v(" attribute to display an input box on the right.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-input")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Selecting a range of values is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value9: [4, 8]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("range")]),s._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-stops")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v("]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value10: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("vertical")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" enables vertical mode. In vertical mode, the "),a("code",[s._v("height")]),s._v(" attribute is required.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("vertical")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"slider"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"discrete-values"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[s._v("¶")]),s._v(" Discrete values")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slider-with-input-box"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider with input box")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"range-selection"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[s._v("¶")]),s._v(" Range selection")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("100")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Slider is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("step size")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("show-input")]),a("td",[s._v("whether to display an input box, works when "),a("code",{pre:!0},[s._v("range")]),s._v(" is false")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-input-controls")]),a("td",[s._v("whether to display control buttons when "),a("code",{pre:!0},[s._v("show-input")]),s._v(" is true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-stops")]),a("td",[s._v("whether to display breakpoints")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-tooltip")]),a("td",[s._v("whether to display tooltip value")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("format-tooltip")]),a("td",[s._v("format to display tooltip value")]),a("td",[s._v("function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("range")]),a("td",[s._v("whether to select a range")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("vertical")]),a("td",[s._v("vertical mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Slider height, required in vertical mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label for screen reader")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing, in milliseconds, works when "),a("code",{pre:!0},[s._v("show-input")]),s._v(" is true")]),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("h2",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),a("td",[s._v("value after changing")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1198)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1199),e=a.n(l),n=a(1200),r=a(0),v=r(e.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.")]),s._m(1),a("p",[s._v("Simple step bar.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n\nNext step\n\n\n',script:"\n export default {\n data() {\n return {\n active: 0\n };\n },\n\n methods: {\n next() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("Next step")])],1),a("p",[s._v("Set "),a("code",[s._v("active")]),s._v(" attribute with "),a("code",[s._v("Number")]),s._v(" type, which indicates the index of steps and starts from 0. You can set "),a("code",[s._v("space")]),s._v(" attribute when the width of the step needs to be fixed which accepts "),a("code",[s._v("Boolean")]),s._v(" type. The unit of the "),a("code",[s._v("space")]),s._v(" attribute is "),a("code",[s._v("px")]),s._v(". If not set, it is responsive. Setting the "),a("code",[s._v("finish-status")]),s._v(" attribute can change the state of the steps that have been completed.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"active"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"next"')]),s._v(">")]),s._v("Next step"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n };\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n next() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active++ > "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(") "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active = "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Shows the status of the step for each step.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"Done"}}),a("el-step",{attrs:{title:"Processing"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("Use "),a("code",[s._v("title")]),s._v(" attribute to set the name of the step, or override the attribute by using a named "),a("code",[s._v("slot")]),s._v(". We have listed all the slot names for you at the end of this page.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Done"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Processing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Title and desription can be centered.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:2,"align-center":""}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),a("el-step",{attrs:{title:"Step 3",description:"Some description"}}),a("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("align-center")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("There is description for each step.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:1}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),a("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("A variety of custom icons can be used in the step bar.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:1}},[a("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),a("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),a("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1),a("p",[s._v("The icon is set by the "),a("code",[s._v("icon")]),s._v(" property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-picture"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Vertical step bars.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n \n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticStyle:{height:"300px"}},[a("el-steps",{attrs:{direction:"vertical",active:1}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1)]),a("p",[s._v("You only need to set the "),a("code",[s._v("direction")]),s._v(" attribute to"),a("code",[s._v("vertical")]),s._v(" in the "),a("code",[s._v("el-steps")]),s._v(" element.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"height: 300px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("direction")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"vertical"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n \n \n \n\n\n\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{space:200,active:1,simple:""}},[a("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),a("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),a("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),a("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("simple")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-picture"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("simple")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},e=[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:"center"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#center","aria-hidden":"true"}},[s._v("¶")]),s._v(" Center")])},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:"simple-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Simple step bars, where "),a("code",{pre:!0},[s._v("align-center")]),s._v(", "),a("code",{pre:!0},[s._v("description")]),s._v(", "),a("code",{pre:!0},[s._v("direction")]),s._v(" and "),a("code",{pre:!0},[s._v("space")]),s._v(" will be ignored.")])},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. Supports percentage.")]),a("td",[s._v("number / string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("display direction")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("current activation step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("status of current step")]),a("td",[s._v("string")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("status of end step")]),a("td",[s._v("string")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("center title and description")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("simple")]),a("td",[s._v("whether to apply simple theme")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("step icon")]),a("td",[s._v("step icon's class name. Icons can be passed via named slot as well")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("current status. It will be automatically set by Steps if not configured.")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("custom icon")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1202)},function(s,t,a){"use strict";function l(s){a(1203)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1205),n=a.n(e),r=a(1206),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1204);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("37cb8105",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-box.demo-switch .el-switch{margin:20px 20px 20px 0}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:!0,value2:!0,value3:!0,value4:!0,value5:"100",value6:!0,value7:!1}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Switch is used for switching between two opposing states.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-switch",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}}),a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("p",[s._v("Bind "),a("code",[s._v("v-model")]),s._v(" to a "),a("code",[s._v("Boolean")]),s._v(" typed variable. The "),a("code",[s._v("active-color")]),s._v(" and "),a("code",[s._v("inactive-color")]),s._v(" attribute decides the background color in two states.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value3: true,\n value4: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}}),a("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("You can add "),a("code",[s._v("active-text")]),s._v(" and "),a("code",[s._v("inactive-text")]),s._v(" attribute to show texts.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by month"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by year"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"display: block"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by month"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by year"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n',script:"\n export default {\n data() {\n return {\n value5: '100'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tooltip",{attrs:{content:"Switch value: "+s.value5,placement:"top"}},[a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)],1),a("p",[s._v("You can set "),a("code",[s._v("active-value")]),s._v(" and "),a("code",[s._v("inactive-value")]),s._v(" attributes. They both receive a "),a("code",[s._v("Boolean")]),s._v(", "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(" typed value.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"'Switch value: ' + value5\"")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active-value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'100'")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value6: true,\n value7: false\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-switch",{attrs:{disabled:""},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}}),a("el-switch",{attrs:{disabled:""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1),a("p",[s._v("Adding the "),a("code",[s._v("disabled")]),s._v(" attribute disables Switch.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"text-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Text description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"extended-value-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Extended value types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Switch is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of Switch")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("40")])]),a("tr",[a("td",[s._v("active-icon-class")]),a("td",[s._v("class name of the icon displayed when in "),a("code",{pre:!0},[s._v("on")]),s._v(" state, overrides "),a("code",{pre:!0},[s._v("active-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inactive-icon-class")]),a("td",[s._v("class name of the icon displayed when in "),a("code",{pre:!0},[s._v("off")]),s._v(" state, overrides "),a("code",{pre:!0},[s._v("inactive-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("active-text")]),a("td",[s._v("text displayed when in "),a("code",{pre:!0},[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inactive-text")]),a("td",[s._v("text displayed when in "),a("code",{pre:!0},[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("active-value")]),a("td",[s._v("switch value when in "),a("code",{pre:!0},[s._v("on")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("inactive-value")]),a("td",[s._v("switch value when in "),a("code",{pre:!0},[s._v("off")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-color")]),a("td",[s._v("background color when in "),a("code",{pre:!0},[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])]),a("tr",[a("td",[s._v("inactive-color")]),a("td",[s._v("background color when in "),a("code",{pre:!0},[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("input name of Switch")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when value changes")]),a("td",[s._v("value after changing")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Switch component")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1208)},function(s,t,a){"use strict";function l(s){a(1209)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1211),n=a.n(e),r=a(1212),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1210);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("22f0eb58",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".el-table .warning-row{background:oldlace}.el-table .success-row{background:#f0f9eb}.demo-table .name-wrapper{display:inline-block}.demo-table .demo-table-expand label{width:90px;color:#99a9bf}.demo-table .demo-table-expand .el-form-item{margin-right:0;margin-bottom:0;width:50%}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}],tableData2:[{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",$info:!0},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",$positive:!0}],tableData3:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData4:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData6:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}],currentRow:null,multipleSelection:[]}},methods:{getSummaries:function(s){var t=s.columns,a=s.data,l=[];return t.forEach(function(s,t){if(0===t)return void(l[t]="Total Cost");var e=a.map(function(t){return Number(t[s.property])});e.every(function(s){return isNaN(s)})?l[t]="N/A":l[t]="$ "+e.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0)}),l},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var t=this;s?s.forEach(function(s){t.$refs.multipleTable.toggleRowSelection(s)}):this.$refs.multipleTable.clearSelection()},handleClick:function(){console.log("click")},handleEdit:function(s,t){console.log(s,t)},handleDelete:function(s,t){console.log(s,t)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,t){return s.address},filterTag:function(s,t){return t.tag===s},filterHandler:function(s,t,a){return t[a.property]===s},tableRowClassName:function(s){var t=(s.row,s.rowIndex);return 1===t?"warning-row":3===t?"success-row":""},deleteRow:function(s,t){t.splice(s,1)},arraySpanMethod:function(s){var t=(s.row,s.column,s.rowIndex),a=s.columnIndex;if(t%2==0){if(0===a)return[1,2];if(1===a)return[0,0]}},objectSpanMethod:function(s){var t=(s.row,s.column,s.rowIndex);if(0===s.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}},indexMethod:function(s){return 2*s}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),s._m(1),a("p",[s._v("Basic table is just for data display.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:' \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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("After setting attribute "),a("code",[s._v("data")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" with an object array, you can use "),a("code",[s._v("prop")]),s._v(" (corresponding to a key of the object in "),a("code",[s._v("data")]),s._v(" array) in "),a("code",[s._v("el-table-column")]),s._v(" to insert data to table columns, and set the attribute "),a("code",[s._v("label")]),s._v(" to define the column name. You can also use the attribute "),a("code",[s._v("width")]),s._v(" to define the width of columns.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[s._v(" "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n ")]),a("span",{attrs:{class:"hljs-tag"}},[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:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("stripe")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By default, Table has no vertical border. If you need it, you can set attribute "),a("code",[s._v("border")]),s._v(" to "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n methods: {\n tableRowClassName({row, rowIndex}) {\n if (rowIndex === 1) {\n return 'warning-row';\n } else if (rowIndex === 3) {\n return 'success-row';\n }\n return '';\n }\n },\n data() {\n return {\n tableData2: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:"\n .el-table .warning-row {\n background: oldlace;\n }\n\n .el-table .success-row {\n background: #f0f9eb;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Use "),a("code",[s._v("row-class-name")]),s._v(" in "),a("code",[s._v("el-table")]),s._v(" to add custom classes to a certain row. Then you can style it with custom classes.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":row-class-name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-table")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".warning-row")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": oldlace;\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-table")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".success-row")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#f0f9eb")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n tableRowClassName({row, rowIndex}) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex === "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning-row'")]),s._v(";\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex === "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success-row'")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n }\n },\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("When there are too many rows, you can use a fixed header.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250"}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header without any other codes.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[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:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[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([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("Detail")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("Edit")])]}}])})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("fixed")]),s._v(" is used in "),a("code",[s._v("el-table-column")]),s._v(", it accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._v(", the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"State"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"City"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Operations"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Detail"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Edit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick() {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(");\n }\n },\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2),a("p",[s._v("Fix columns and header at the same time by combining the above two examples.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"State"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"City"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[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:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"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([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n 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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max-height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"State"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"City"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Operations"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click.native.prevent")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n Remove\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n deleteRow(index, rows) {\n rows.splice(index, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n }\n },\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData4")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{label:"Delivery Info"}},[a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{label:"Address Info"}},[a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2),a("p",[s._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Delivery Info"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address Info"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"State"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"City"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[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:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),a("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.setCurrent(s.tableData[1])}}},[s._v("Select second row")]),a("el-button",{on:{click:function(t){s.setCurrent()}}},[s._v("Clear selection")])],1)]],2),a("p",[s._v("Table supports single row selection. You can activate it by adding the "),a("code",[s._v("highlight-current-row")]),s._v(" attribute. An event called "),a("code",[s._v("current-change")]),s._v(" will be triggered when row selection changes, and its parameters are the rows after and before this change: "),a("code",[s._v("currentRow")]),s._v(" and "),a("code",[s._v("oldCurrentRow")]),s._v(". If you need to display row index, you can add a new "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" attribute assigned to "),a("code",[s._v("index")]),s._v(", and you will see the index starting from 1.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"singleTable"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("highlight-current-row")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"setCurrent(tableData[1])"')]),s._v(">")]),s._v("Select second row"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"setCurrent()"')]),s._v(">")]),s._v("Clear selection"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("currentRow")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n setCurrent(row) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.singleTable.setCurrentRow(row);\n },\n handleCurrentChange(val) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".currentRow = val;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("You can also select multiple rows.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n multipleSelection: []\n }\n },\n\n methods: {\n toggleSelection(rows) {\n if (rows) {\n rows.forEach(row => {\n this.$refs.multipleTable.toggleRowSelection(row);\n });\n } else {\n this.$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n this.multipleSelection = val;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3},on:{"selection-change":s.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),a("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:s._u([{key:"default",fn:function(t){return[s._v(s._s(t.row.date))]}}])}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.toggleSelection([s.tableData3[1],s.tableData3[2]])}}},[s._v("Toggle selection status of second and third rows")]),a("el-button",{on:{click:function(t){s.toggleSelection()}}},[s._v("Clear selection")])],1)]],2),a("p",[s._v("Activating multiple selection is easy: simply add an "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" set to "),a("code",[s._v("selection")]),s._v(". Apart from multiple selection, this example also uses "),a("code",[s._v("show-overflow-tooltip")]),s._v(": by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute "),a("code",[s._v("show-overflow-tooltip")]),s._v(", which accepts a "),a("code",[s._v("Boolean")]),s._v(" value. When set "),a("code",[s._v("true")]),s._v(", the extra content will show in tooltip when hover on the cell.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"multipleTable"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@selection-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selection"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"55"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("{{ scope.row.date }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"toggleSelection([tableData3[1], tableData3[2]])"')]),s._v(">")]),s._v("Toggle selection status of second and third rows"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"toggleSelection()"')]),s._v(">")]),s._v("Clear selection"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("multipleSelection")]),s._v(": []\n }\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n toggleSelection(rows) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rows) {\n rows.forEach("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("row")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.multipleTable.toggleRowSelection(row);\n });\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".multipleSelection = val;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Sort the data to find or compare data quickly.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,"default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}})],1)]],2),a("p",[s._v("Set attribute "),a("code",[s._v("sortable")]),s._v(" in a certain column to sort the data based on this column. It accepts "),a("code",[s._v("Boolean")]),s._v(" with a default value "),a("code",[s._v("false")]),s._v(". Set table attribute "),a("code",[s._v("default-sort")]),s._v(" to determine default sort column and order. To apply your own sorting rules, use "),a("code",[s._v("sort-method")]),s._v(" or "),a("code",[s._v("sort-by")]),s._v(". If you need remote sorting from backend, set "),a("code",[s._v("sortable")]),s._v(" to "),a("code",[s._v("custom")]),s._v(", and listen to the "),a("code",[s._v("sort-change")]),s._v(" event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named "),a("code",[s._v("formatter")]),s._v(" to format the value of certain columns. It accepts a function which has two parameters: "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("column")]),s._v(". You can handle it according to your own needs.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-sort")]),s._v(" = "),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":formatter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.address;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[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:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n },\n filterTag(value, row) {\n return row.tag === value;\n },\n filterHandler(value, row, column) {\n const property = column['property'];\n return row[property] === value;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":s.filterHandler}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":s.filterTag,"filter-placement":"bottom-end"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-tag",{attrs:{type:"Home"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}}])})],1)]],2),a("p",[s._v("Set attribute "),a("code",[s._v("filters")]),s._v(" and "),a("code",[s._v("filter-method")]),s._v(" in "),a("code",[s._v("el-table-column")]),s._v(" makes this column filterable. "),a("code",[s._v("filters")]),s._v(" is an array, and "),a("code",[s._v("filter-method")]),s._v(" is a function deciding which rows are displayed. It has three parameters: "),a("code",[s._v("value")]),s._v(", "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("column")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":filters")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filterHandler"')]),s._v("\n >")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":formatter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Tag"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":filters")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filterTag"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filter-placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"scope.row.tag === 'Home' ? 'primary' : 'success'\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("close-transition")]),s._v(">")]),s._v("{{scope.row.tag}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.address;\n },\n filterTag(value, row) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.tag === value;\n },\n filterHandler(value, row, column) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" property = column["),a("span",{attrs:{class:"hljs-string"}},[s._v("'property'")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row[property] === value;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("Customize table column so it can be integrated with other components.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("i",{staticClass:"el-icon-time"}),a("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(t.row.date))])]}}])}),a("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[s._v("Name: "+s._s(t.row.name))]),a("p",[s._v("Addr: "+s._s(t.row.address))]),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[s._v(s._s(t.row.name))])],1)])]}}])}),a("el-table-column",{attrs:{label:"Operations"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("Edit")]),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("Delete")])]}}])})],1)]],2),a("p",[s._v("You have access to the following data: row, column, $index and store (state management of Table) by "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slot")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-time"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-left: 10px"')]),s._v(">")]),s._v("{{ scope.row.date }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Name: {{ scope.row.name }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Addr: {{ scope.row.address }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("{{ scope.row.name }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Operations"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("Edit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("Delete"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleEdit(index, row) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n },\n handleDelete(index, row) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(15),a("p",[s._v("When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("p",[s._v("State: "+s._s(t.row.state))]),a("p",[s._v("City: "+s._s(t.row.city))]),a("p",[s._v("Address: "+s._s(t.row.address))]),a("p",[s._v("Zip: "+s._s(t.row.zip))])]}}])}),a("el-table-column",{attrs:{label:"Date",prop:"date"}}),a("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2),a("p",[s._v('Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using '),a("code",[s._v("Scoped slot")]),s._v(" in custom column templates.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"expand"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("State: {{ props.row.state }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("City: {{ props.row.city }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Address: {{ props.row.address }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Zip: {{ props.row.zip }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(16),a("p",[s._v("For table of numbers, you can add an extra row at the table footer displaying each column's sum.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData6: [{\n id: '12987122',\n name: 'Tom',\n amount1: '234',\n amount2: '3.2',\n amount3: 10\n }, {\n id: '12987123',\n name: 'Tom',\n amount1: '165',\n amount2: '4.43',\n amount3: 12\n }, {\n id: '12987124',\n name: 'Tom',\n amount1: '324',\n amount2: '1.9',\n amount3: 9\n }, {\n id: '12987125',\n name: 'Tom',\n amount1: '621',\n amount2: '2.2',\n amount3: 17\n }, {\n id: '12987126',\n name: 'Tom',\n amount1: '539',\n amount2: '4.1',\n amount3: 15\n }]\n };\n },\n methods: {\n getSummaries(param) {\n const { columns, data } = param;\n const sums = [];\n columns.forEach((column, index) => {\n if (index === 0) {\n sums[index] = 'Total Cost';\n return;\n }\n const values = data.map(item => Number(item[column.property]));\n if (!values.every(value => isNaN(value))) {\n sums[index] = '$ ' + values.reduce((prev, curr) => {\n const value = Number(curr);\n if (!isNaN(value)) {\n return prev + curr;\n } else {\n return prev;\n }\n }, 0);\n } else {\n sums[index] = 'N/A';\n }\n });\n\n return sums;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",label:"Cost 1 ($)"}}),a("el-table-column",{attrs:{prop:"amount2",label:"Cost 2 ($)"}}),a("el-table-column",{attrs:{prop:"amount3",label:"Cost 3 ($)"}})],1)]],2),a("p",[s._v("You can add the summary row by setting "),a("code",[s._v("show-summary")]),s._v(" to "),a("code",[s._v("true")]),s._v(". By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using "),a("code",[s._v("sum-text")]),s._v("), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to "),a("code",[s._v("summary-method")]),s._v(", which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-summary")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":summary-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"getSummaries"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-summary")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Cost 1 ($)"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Cost 2 ($)"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Cost 3 ($)"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData6")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987122'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'234'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'3.2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987123'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'165'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'4.43'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987124'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'324'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1.9'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987125'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'621'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2.2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("17")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987126'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'539'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'4.1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("\n }]\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n getSummaries(param) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" { columns, data } = param;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" sums = [];\n columns.forEach("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("column, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n sums[index] = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Total Cost'")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" values = data.map("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v("(item[column.property]));\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!values.every("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("value")]),s._v(" =>")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("isNaN")]),s._v("(value))) {\n sums[index] = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'$ '")]),s._v(" + values.reduce("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("prev, curr")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" value = "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v("(curr);\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("isNaN")]),s._v("(value)) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" prev + curr;\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" prev;\n }\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n sums[index] = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'N/A'")]),s._v(";\n }\n });\n\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" sums;\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(17),a("p",[s._v("Configuring rowspan and colspan allows you to merge cells")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData6: [{\n id: '12987122',\n name: 'Tom',\n amount1: '234',\n amount2: '3.2',\n amount3: 10\n }, {\n id: '12987123',\n name: 'Tom',\n amount1: '165',\n amount2: '4.43',\n amount3: 12\n }, {\n id: '12987124',\n name: 'Tom',\n amount1: '324',\n amount2: '1.9',\n amount3: 9\n }, {\n id: '12987125',\n name: 'Tom',\n amount1: '621',\n amount2: '2.2',\n amount3: 17\n }, {\n id: '12987126',\n name: 'Tom',\n amount1: '539',\n amount2: '4.1',\n amount3: 15\n }]\n };\n },\n methods: {\n arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n if (rowIndex % 2 === 0) {\n if (columnIndex === 0) {\n return [1, 2];\n } else if (columnIndex === 1) {\n return [0, 0];\n }\n }\n },\n\n objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n if (columnIndex === 0) {\n if (rowIndex % 2 === 0) {\n return {\n rowspan: 2,\n colspan: 1\n };\n } else {\n return {\n rowspan: 0,\n colspan: 0\n };\n }\n }\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,"span-method":s.arraySpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,"span-method":s.objectSpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",label:"Amount 1"}}),a("el-table-column",{attrs:{prop:"amount2",label:"Amount 2"}}),a("el-table-column",{attrs:{prop:"amount3",label:"Amount 3"}})],1)],1)]],2),a("p",[s._v("Use the "),a("code",[s._v("span-method")]),s._v(" attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row "),a("code",[s._v("row")]),s._v(", current column "),a("code",[s._v("column")]),s._v(", current row index "),a("code",[s._v("rowIndex")]),s._v(" and current column index "),a("code",[s._v("columnIndex")]),s._v(". The method should return an array of two numbers, the first number being "),a("code",[s._v("rowspan")]),s._v(" and second "),a("code",[s._v("colspan")]),s._v(". It can also return an object with "),a("code",[s._v("rowspan")]),s._v(" and "),a("code",[s._v("colspan")]),s._v(" props.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"arraySpanMethod"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"objectSpanMethod"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData6")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987122'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'234'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'3.2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987123'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'165'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'4.43'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987124'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'324'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1.9'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987125'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'621'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2.2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("17")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987126'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'539'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'4.1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("\n }]\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex % "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(" === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" ["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("];\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" ["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("];\n }\n }\n },\n\n objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex % "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(" === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rowspan")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("colspan")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rowspan")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("colspan")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n };\n }\n }\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(18),s._m(19),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '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 methods: {\n indexMethod(index) {\n return index * 2;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{type:"index",index:s.indexMethod}}),a("el-table-column",{attrs:{prop:"date",label:"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("To customize row indices, use "),a("code",[s._v("index")]),s._v(" attribute on with "),a("code",[s._v("type=index")]),s._v(". If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from "),a("code",[s._v("0")]),s._v(") as parameter, and the returned value will be displayed as index.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"indexMethod"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }],\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n indexMethod(index) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" index * "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(";\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26),s._m(27),s._m(28),s._m(29)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"striped-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Striped Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-border"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with border")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-column"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed column")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed columns and header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fluid-height Table with fixed header (and columns)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping-table-head"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping table head")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sorting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sorting")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filter")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-column-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom column template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"expandable-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Expandable row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"summary-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Summary row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"rowspan-and-colspan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rowspan-and-colspan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rowspan and colspan")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-index"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-index","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom index")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can customize row index in "),a("code",{pre:!0},[s._v("type=index")]),s._v(" columns.")])},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",{pre:!0},[s._v("auto")]),s._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, 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",{pre:!0},[s._v("auto")]),s._v(" until it reaches the maxHeight limit. The "),a("code",{pre:!0},[s._v("maxHeight")]),s._v(" is measured in pixels, same as "),a("code",{pre:!0},[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("size")]),a("td",[s._v("size of Table")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("whether width of column automatically fits its container")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-header")]),a("td",[s._v("whether Table header is visible")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("highlight-current-row")]),a("td",[s._v("whether current row is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-row-key")]),a("td",[s._v("key of current row, a set only prop")]),a("td",[s._v("string,number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-class-name")]),a("td",[s._v("function that returns custom class names for a row, or a string assigning class names for every row")]),a("td",[s._v("Function({row, rowIndex})/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-style")]),a("td",[s._v("function that returns custom style for a row, or an object assigning custom style for every row")]),a("td",[s._v("Function({row, rowIndex})/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("cell-class-name")]),a("td",[s._v("function that returns custom class names for a cell, or a string assigning class names for every cell")]),a("td",[s._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("cell-style")]),a("td",[s._v("function that returns custom style for a cell, or an object assigning custom style for every cell")]),a("td",[s._v("Function({row, column, rowIndex, columnIndex})/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-row-class-name")]),a("td",[s._v("function that returns custom class names for a row in table header, or a string assigning class names for every row in table header")]),a("td",[s._v("Function({row, rowIndex})/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-row-style")]),a("td",[s._v("function that returns custom style for a row in table header, or an object assigning custom style for every row in table header")]),a("td",[s._v("Function({row, rowIndex})/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-cell-class-name")]),a("td",[s._v("function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header")]),a("td",[s._v("Function({row, rowIndex})/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-cell-style")]),a("td",[s._v("function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header")]),a("td",[s._v("Function({row, rowIndex})/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-key")]),a("td",[s._v("key of row data, used for optimizing rendering. Required if "),a("code",{pre:!0},[s._v("reserve-selection")]),s._v(" is on. When its type is String, multi-level access is supported, e.g. "),a("code",{pre:!0},[s._v("user.info.id")]),s._v(", but "),a("code",{pre:!0},[s._v("user.info[0].id")]),s._v(" is not supported, in which case "),a("code",{pre:!0},[s._v("Function")]),s._v(" should be used.")]),a("td",[s._v("Function(row)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("Displayed text when data is empty. You can customize this area with "),a("code",{pre:!0},[s._v('slot="empty"')])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("No Data")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v('whether expand all rows by default, only works when the table has a column type="expand"')]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-row-keys")]),a("td",[s._v("set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td")]),a("tr",[a("td",[s._v("default-sort")]),a("td",[s._v("set the default sort column and order. property "),a("code",{pre:!0},[s._v("prop")]),s._v(" is used to set default sort column, property "),a("code",{pre:!0},[s._v("order")]),s._v(" is used to set default sort order")]),a("td",[s._v("Object")]),a("td",[a("code",{pre:!0},[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("if "),a("code",{pre:!0},[s._v("prop")]),s._v(" is set, and "),a("code",{pre:!0},[s._v("order")]),s._v(" is not set, then "),a("code",{pre:!0},[s._v("order")]),s._v(" is default to ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",{pre:!0},[s._v("effect")]),s._v(" property")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td")]),a("tr",[a("td",[s._v("show-summary")]),a("td",[s._v("whether to display a summary row")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sum-text")]),a("td",[s._v("displayed text for the first column of summary row")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("Sum")])]),a("tr",[a("td",[s._v("summary-method")]),a("td",[s._v("custom summary method")]),a("td",[s._v("Function({ columns, data })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("span-method")]),a("td",[s._v("method that returns rowspan and colspan")]),a("td",[s._v("Function({ row, column, rowIndex, columnIndex })")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when user clicks the checkbox in a row")]),a("td",[s._v("selection, row")])]),a("tr",[a("td",[s._v("select-all")]),a("td",[s._v("triggers when user clicks the checkbox in table header")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("selection-change")]),a("td",[s._v("triggers when selection changes")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("cell-mouse-enter")]),a("td",[s._v("triggers when hovering into a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-mouse-leave")]),a("td",[s._v("triggers when hovering out of a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-click")]),a("td",[s._v("triggers when clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-dblclick")]),a("td",[s._v("triggers when double clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("row-click")]),a("td",[s._v("triggers when clicking a row")]),a("td",[s._v("row, event, column")])]),a("tr",[a("td",[s._v("row-contextmenu")]),a("td",[s._v("triggers when user right clicks on a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("row-dblclick")]),a("td",[s._v("triggers when double clicking a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("header-click")]),a("td",[s._v("triggers when clicking a column header")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("header-contextmenu")]),a("td",[s._v("triggers when user right clicks on a column header")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("sort-change")]),a("td",[s._v("triggers when Table's sorting changes")]),a("td",[s._v("{ column, prop, order }")])]),a("tr",[a("td",[s._v("filter-change")]),a("td",[s._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered")]),a("td",[s._v("filters")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current row changes")]),a("td",[s._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[s._v("header-dragend")]),a("td",[s._v("triggers after changing a column's width by dragging the column header's border")]),a("td",[s._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[s._v("expand-change")]),a("td",[s._v("triggers when user expands or collapses a row")]),a("td",[s._v("row, expandedRows")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearSelection")]),a("td",[s._v("used in multiple selection Table, clear selection, might be useful when "),a("code",{pre:!0},[s._v("reserve-selection")]),s._v(" is on")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("toggleRowSelection")]),a("td",[s._v("used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected")]),a("td",[s._v("row, selected")])]),a("tr",[a("td",[s._v("toggleRowExpansion")]),a("td",[s._v("used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed")]),a("td",[s._v("row, expanded")])]),a("tr",[a("td",[s._v("setCurrentRow")]),a("td",[s._v("used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.")]),a("td",[s._v("row")])]),a("tr",[a("td",[s._v("clearSort")]),a("td",[s._v("clear sorting, restore data to the original order")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearFilter")]),a("td",[s._v("clear filter")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("doLayout")]),a("td",[s._v("Refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("append")]),a("td",[s._v("Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one.")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-column-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the column. If set to "),a("code",{pre:!0},[s._v("selection")]),s._v(", the column will display checkbox. If set to "),a("code",{pre:!0},[s._v("index")]),s._v(", the column will display index of the row (staring from 1). If set to "),a("code",{pre:!0},[s._v("expand")]),s._v(", the column will display expand icon.")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("index")]),a("td",[s._v("customize indices for each row, works on columns with "),a("code",{pre:!0},[s._v("type=index")])]),a("td",[s._v("string, Function(index)")]),a("td",[s._v("-")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("column label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("column-key")]),a("td",[s._v("column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered")]),a("td",[s._v("string")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prop")]),a("td",[s._v("field name. You can also use its alias: "),a("code",{pre:!0},[s._v("property")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("column width")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min-width")]),a("td",[s._v("column minimum width. Columns with "),a("code",{pre:!0},[s._v("width")]),s._v(" has a fixed width, while columns with "),a("code",{pre:!0},[s._v("min-width")]),s._v(" has a width that is distributed in proportion")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fixed")]),a("td",[s._v("whether column is fixed at left/right. Will be fixed at left if "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("string/boolean")]),a("td",[s._v("true/left/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-header")]),a("td",[s._v("render function for table header of this column")]),a("td",[s._v("Function(h, { column, $index })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sortable")]),a("td",[s._v("whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the "),a("code",{pre:!0},[s._v("sort-change")]),s._v(" event of Table")]),a("td",[s._v("boolean, string")]),a("td",[s._v("true, false, custom")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sort-method")]),a("td",[s._v("sorting method, works when "),a("code",{pre:!0},[s._v("sortable")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v(". Should return a number, just like Array.sort")]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sort-by")]),a("td",[s._v("specify which property to sort by, works when "),a("code",{pre:!0},[s._v("sortable")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v(" and "),a("code",{pre:!0},[s._v("sort-method")]),s._v(" is "),a("code",{pre:!0},[s._v("undefined")]),s._v(". If set to an Array, the column will sequentially sort by the next property if the previous one is equal")]),a("td",[s._v("Function(row, index)/String/Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resizable")]),a("td",[s._v("whether column width can be resized, works when "),a("code",{pre:!0},[s._v("border")]),s._v(" of "),a("code",{pre:!0},[s._v("el-table")]),s._v(" is "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("formatter")]),a("td",[s._v("function that formats cell content")]),a("td",[s._v("Function(row, column, cellValue)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-overflow-tooltip")]),a("td",[s._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("string")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("header-align")]),a("td",[s._v("alignment of the table header. If omitted, the value of the above "),a("code",{pre:!0},[s._v("align")]),s._v(" attribute will be applied")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("class-name")]),a("td",[s._v("class name of cells in the column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-class-name")]),a("td",[s._v("class name of the label of this column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("selectable")]),a("td",[s._v("function that determines if a certain row can be selected, works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-selection")]),a("td",[s._v("whether to reserve selection after data refreshing, works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filters")]),a("td",[s._v("an array of data filtering options. For each element in this array, "),a("code",{pre:!0},[s._v("text")]),s._v(" and "),a("code",{pre:!0},[s._v("value")]),s._v(" are required")]),a("td",[s._v("Array[{ text, value }]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-placement")]),a("td",[s._v("placement for the filter dropdown")]),a("td",[s._v("String")]),a("td",[s._v("same as Tooltip's "),a("code",{pre:!0},[s._v("placement")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-multiple")]),a("td",[s._v("whether data filtering supports multiple options")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("data filtering method. If "),a("code",{pre:!0},[s._v("filter-multiple")]),s._v(" is on, this method will be called multiple times for each row, and a row will display if one of the calls returns "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("Function(value, row, column)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filtered-value")]),a("td",[s._v("filter value for selected data, might be useful when table header is rendered with "),a("code",{pre:!0},[s._v("render-header")])]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1214)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(1215),e=a.n(l),n=a(1216),r=a(0),v=r(e.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{activeName:"second",activeName2:"first",editableTabsValue:"2",editableTabsValue2:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2,tabPosition:"top"}},methods:{handleClick:function(s,t){console.log(s,t)},handleTabsEdit:function(s,t){var a=this;if("add"===t){var l=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:l,content:"New Tab content"}),this.editableTabsValue=l}"remove"===t&&function(){var t=a.editableTabs,l=a.editableTabsValue;l===s&&t.forEach(function(a,e){if(a.name===s){var n=t[e+1]||t[e-1];n&&(l=n.name)}}),a.editableTabsValue=l,a.editableTabs=t.filter(function(t){return t.name!==s})}()},addTab:function(s){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(s){var t=this.editableTabs2,a=this.editableTabsValue2;a===s&&t.forEach(function(l,e){if(l.name===s){var n=t[e+1]||t[e-1];n&&(a=n.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Divide data collections which are related yet belong to different types.")]),s._m(1),a("p",[s._v("Basic and concise tabs.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n activeName: 'first'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[s._v("Task")])],1)]],2),a("p",[s._v("Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the "),a("code",[s._v("value")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"activeName"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@tab-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"first"')]),s._v(">")]),s._v("User"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"second"')]),s._v(">")]),s._v("Config"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"third"')]),s._v(">")]),s._v("Role"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fourth"')]),s._v(">")]),s._v("Task"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'first'")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Tabs styled as cards.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n activeName: 'first'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._v(" can get a card-styled tab.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@tab-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'first'")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Border card tabs.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n User\n Config\n Role\n Task\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("border-card")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n tabPosition: 'top'\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:s.tabPosition,callback:function(t){s.tabPosition=t},expression:"tabPosition"}},[a("el-radio-button",{attrs:{label:"top"}},[s._v("top")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("right")]),a("el-radio-button",{attrs:{label:"bottom"}},[s._v("bottom")]),a("el-radio-button",{attrs:{label:"left"}},[s._v("left")])],1),a("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":s.tabPosition}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),a("p",[s._v("You can choose from four directions: "),a("code",[s._v('tabPosition="left|right|top|bottom"')])]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tabPosition"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 30px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("top"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("right"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("bottom"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("left"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":tab-position")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tabPosition"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"height: 200px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabPosition")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top'")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("You can use named slot to customize the tab label content.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Route\n Route\n \n Config\n Role\n Task\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{attrs:{slot:"label"},slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" 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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"label"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v(" Route"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n Route\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Only card type Tabs support addable & closeable.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n {{item.content}}\n \n\n\n',script:"\n export default {\n data() {\n return {\n editableTabsValue: '2',\n editableTabs: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n handleTabsEdit(targetName, action) {\n if (action === 'add') {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue = newTabName;\n }\n if (action === 'remove') {\n let tabs = this.editableTabs;\n let activeName = this.editableTabsValue;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue = activeName;\n this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:s.handleTabsEdit},model:{value:s.editableTabsValue,callback:function(t){s.editableTabsValue=t},expression:"editableTabsValue"}},s._l(s.editableTabs,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}))],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("editable")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@edit")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in editableTabs"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.title"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n {{item.content}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabsValue")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabs")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabIndex")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleTabsEdit(targetName, action) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'add'")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" newTabName = ++"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".tabIndex + "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": newTabName,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'remove'")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" tabs = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" activeName = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] || tabs[index - "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue = activeName;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n add tab\n \n
    \n\n \n {{item.content}}\n \n\n\n',script:"\n export default {\n data() {\n return {\n editableTabsValue2: '2',\n editableTabs2: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n addTab(targetName) {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs2.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n let tabs = this.editableTabs2;\n let activeName = this.editableTabsValue2;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue2 = activeName;\n this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){s.addTab(s.editableTabsValue2)}}},[s._v("\n add tab\n ")])],1),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":s.removeTab},model:{value:s.editableTabsValue2,callback:function(t){s.editableTabsValue2=t},expression:"editableTabsValue2"}},s._l(s.editableTabs2,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}))],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n >")]),s._v("\n add tab\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@tab-remove")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"removeTab"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in editableTabs2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.title"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n {{item.content}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabsValue2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabs2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabIndex")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n addTab(targetName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" newTabName = ++"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".tabIndex + "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": newTabName,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" tabs = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" activeName = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] || tabs[index - "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card Style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"border-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Border card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-position"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-position","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab position")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use "),a("code",{pre:!0},[s._v("tab-position")]),s._v(" attribute to set the tab's position.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom Tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"add-close-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Add & close tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customized trigger button of new tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of Tab")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("whether Tab is addable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether Tab is addable and closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])]),a("tr",[a("td",[s._v("tab-position")]),a("td",[s._v("position of tabs")]),a("td",[s._v("string")]),a("td",[s._v("top/right/bottom/left")]),a("td",[s._v("top")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("triggers when a tab is clicked")]),a("td",[s._v("clicked tab")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("triggers when tab-remove button is clicked")]),a("td",[s._v("name of the removed tab")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("triggers when tab-add button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("triggers when tab-add button or tab-remove is clicked")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("title of the tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tab is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1218)},function(s,t,a){"use strict";function l(s){a(1219)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1221),n=a.n(e),r=a(1222),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1220);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("083464aa",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-box.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-box.demo-tag .button-new-tag{margin-left:10px;height:32px;line-height:30px;padding-top:0;padding-bottom:0}.demo-box.demo-tag .input-new-tag{width:90px;margin-left:10px;vertical-align:bottom}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}],dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for marking and selection.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Tag One\nTag Two\nTag Three\nTag Four\nTag Five\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tag",[s._v("Tag One")]),a("el-tag",{attrs:{type:"success"}},[s._v("Tag Two")]),a("el-tag",{attrs:{type:"info"}},[s._v("Tag Three")]),a("el-tag",{attrs:{type:"warning"}},[s._v("Tag Four")]),a("el-tag",{attrs:{type:"danger"}},[s._v("Tag Five")])],1),a("p",[s._v("Use the "),a("code",[s._v("type")]),s._v(" attribute to define Tag's type. In addition, the "),a("code",[s._v("color")]),s._v(" attribute can be used to set the background color of the Tag.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("Tag One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("Tag Two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("Tag Three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("Tag Four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("Tag Five"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n {{tag.name}}\n\n\n\n',script:"\n export default {\n data() {\n return {\n tags: [\n { name: 'Tag 1', type: '' },\n { name: 'Tag 2', type: 'success' },\n { name: 'Tag 3', type: 'info' },\n { name: 'Tag 4', type: 'warning' },\n { name: 'Tag 5', type: 'danger' }\n ]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},s._l(s.tags,function(t){return a("el-tag",{key:t.name,attrs:{closable:"",type:t.type}},[s._v("\n "+s._s(t.name)+"\n")])})),a("p",[a("code",[s._v("closable")]),s._v(" attribute can be used to define a removable tag. It accepts a "),a("code",[s._v("Boolean")]),s._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),a("code",[s._v("disable-transitions")]),s._v(" attribute, which accepts a "),a("code",[s._v("Boolean")]),s._v(", to "),a("code",[s._v("true")]),s._v(". "),a("code",[s._v("close")]),s._v(" event triggers when Tag is removed.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag in tags"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag.name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag.type"')]),s._v(">")]),s._v("\n {{tag.name}}\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tags")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 1'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 2'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 3'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 4'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 5'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'danger'")]),s._v(" }\n ]\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n {{tag}}\n\n\n\n+ New Tag\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n inputVisible: false,\n inputValue: ''\n };\n },\n methods: {\n handleClose(tag) {\n this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n },\n\n showInput() {\n this.inputVisible = true;\n this.$nextTick(_ => {\n this.$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n let inputValue = this.inputValue;\n if (inputValue) {\n this.dynamicTags.push(inputValue);\n }\n this.inputVisible = false;\n this.inputValue = '';\n }\n }\n }\n",style:"\n .el-tag + .el-tag {\n margin-left: 10px;\n }\n .button-new-tag {\n margin-left: 10px;\n height: 32px;\n line-height: 30px;\n padding-top: 0;\n padding-bottom: 0;\n }\n .input-new-tag {\n width: 90px;\n margin-left: 10px;\n vertical-align: bottom;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n "+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(t){if(!("button"in t)&&s._k(t.keyCode,"enter",13,t.key))return null;s.handleInputConfirm(t)}},model:{value:s.inputValue,callback:function(t){s.inputValue=t},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag in dynamicTags"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disable-transitions")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose(tag)"')]),s._v(">")]),s._v("\n {{tag}}\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input-new-tag"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"inputVisible"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"inputValue"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"saveTagInput"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@keyup.enter.native")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleInputConfirm"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@blur")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"button-new-tag"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-tag")]),s._v(" + "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-tag")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".button-new-tag")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("32px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("30px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding-top")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".input-new-tag")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("90px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("vertical-align")]),s._v(": bottom;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dynamicTags")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 1'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 2'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 3'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inputVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inputValue")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClose(tag) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n },\n\n showInput() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputVisible = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$nextTick("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" inputValue = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputValue;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (inputValue) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputVisible = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputValue = "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Default\nMedium\nSmall\nMini\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tag",[s._v("Default")]),a("el-tag",{attrs:{size:"medium"}},[s._v("Medium")]),a("el-tag",{attrs:{size:"small"}},[s._v("Small")]),a("el-tag",{attrs:{size:"mini"}},[s._v("Mini")])],1),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("medium")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Medium"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Small"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("Mini"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"removable-tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Removable Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"edit-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Edit Dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use the "),a("code",{pre:!0},[s._v("close")]),s._v(" event to add and remove tag dynamically.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("theme")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tag can be removed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disable-transitions")]),a("td",[s._v("whether to disable animations")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("whether Tag has a highlighted border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("background color of the Tag")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("tag size")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when Tag is removed")]),a("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1224)},function(s,t,a){"use strict";function l(s){a(1225)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1227),n=a.n(e),r=a(1228),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1226);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("58b10e42",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-box .el-date-editor+.el-date-editor{margin-left:10px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:"",value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40),value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],startTime:"",endTime:""}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Time Picker for time input.")]),s._m(1),a("p",[s._v("Provide a list of fixed time for users to choose.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value1: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("p",[s._v("Use "),a("code",[s._v("el-time-select")]),s._v(" label, then assign start time, end time and time step with "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(" and "),a("code",[s._v("step")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select time"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Can pick an arbitrary time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value2: new Date(2016, 9, 10, 18, 40),\n value3: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}}),a("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})]],2),a("p",[s._v("Use "),a("code",[s._v("el-time-picker")]),s._v(" label, and you can limit the time range by specifying "),a("code",[s._v("selectableRange")]),s._v(". By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the "),a("code",[s._v("arrow-control")]),s._v(" attribute is set.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("arrow-control")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("18")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v("),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("18")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("If start time is picked at first, then the end time will change accordingly.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n",script:"\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(t){s.startTime=t},expression:"startTime"}}),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(t){s.endTime=t},expression:"endTime"}})]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"startTime"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"endTime"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\"")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("startTime")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("endTime")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can pick an arbitrary time range.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}}),a("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})]],2),a("p",[s._v("We can pick a time range by adding an "),a("code",[s._v("is-range")]),s._v(" attribute. Also, "),a("code",[s._v("arrow-control")]),s._v(" is supported in range mode.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("is-range")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("is-range")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("arrow-control")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": ["),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v("), "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": ["),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v("), "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")]\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder in non-range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("placeholder for the start time in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("placeholder for the end time in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-range")]),a("td",[s._v("whether to pick a time range, only works with "),a("code",{pre:!0},[s._v("")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("arrow-control")]),a("td",[s._v("whether to pick time using arrow buttons, only works with "),a("code",{pre:!0},[s._v("")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of the picker")]),a("td",[s._v("Date for Time Picker, and string for Time Select")]),a("td",[s._v("-")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left / center / right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for TimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("optional, default date of the calendar")]),a("td",[s._v("Date for TimePicker, string for TimeSelect")]),a("td",[s._v("anything accepted by "),a("code",{pre:!0},[s._v("new Date()")]),s._v(" for TimePicker, selectable value for TimeSelect")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value-format")]),a("td",[s._v("optional, only for TimePicker, format of binding value. If not specified, the binding value will be a Date object")]),a("td",[s._v("string")]),a("td",[s._v("see "),a("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[s._v("date formats")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("Custom prefix icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-time")])]),a("tr",[a("td",[s._v("clear-icon")]),a("td",[s._v("Custom clear icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-circle-close")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("start time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("end time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("time step")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("minimum time, any time before this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("maximum time, any time after this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("available time range, e.g."),a("code",{pre:!0},[s._v("'18:30:00 - 20:30:00'")]),s._v("or"),a("code",{pre:!0},[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string / array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("hour "),a("code",{pre:!0},[s._v("HH")]),s._v(", minute "),a("code",{pre:!0},[s._v("mm")]),s._v(", second "),a("code",{pre:!0},[s._v("ss")]),s._v(", AM/PM "),a("code",{pre:!0},[s._v("A")])]),a("td",[s._v("HH:mm:ss")])])])])},function(){var s=this,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 user confirms the value")]),a("td",[s._v("component's binding value")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("component instance")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("component instance")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1230)},function(s,t,a){"use strict";function l(s){a(1231)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1233),n=a.n(e),r=a(1234),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1232);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("6dfdb32b",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-tooltip.demo-en-US .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip.demo-en-US .box{width:400px}.demo-tooltip.demo-en-US .box .top{text-align:center}.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 .box .bottom{clear:both;text-align:center}.demo-tooltip.demo-en-US .box .item{margin:4px}.demo-tooltip.demo-en-US .box .left .el-tooltip__popper,.demo-tooltip.demo-en-US .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip.demo-en-US .box .el-tooltip{margin-left:0}.demo-tooltip.demo-en-US:first-of-type .source .el-button{width:110px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t,a){"use strict";var l=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:'
    \n
    \n \n top-start\n \n \n top\n \n \n top-end\n \n
    \n
    \n \n left-start\n \n \n left\n \n \n left-end\n \n
    \n\n
    \n \n right-start\n \n \n right\n \n \n right-end\n \n
    \n
    \n \n bottom-start\n \n \n bottom\n \n \n bottom-end\n \n
    \n
    \n\n\n',script:null,style:"\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[a("el-button",[s._v("top-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[s._v("top")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[s._v("top-end")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[s._v("left-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[s._v("left")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[s._v("left-end")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[s._v("right-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[s._v("right")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[s._v("right-end")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[s._v("bottom-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[s._v("bottom")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[s._v("bottom-end")])],1)],1)])]),a("p",[s._v("Use attribute "),a("code",[s._v("content")]),s._v(" to set the display content when hover. The attribute "),a("code",[s._v("placement")]),s._v(" determines the position of the tooltip. Its value is "),a("code",[s._v("[orientation]-[alignment]")]),s._v(" with four orientations "),a("code",[s._v("top")]),s._v(", "),a("code",[s._v("left")]),s._v(", "),a("code",[s._v("right")]),s._v(", "),a("code",[s._v("bottom")]),s._v(" and three alignments "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(", "),a("code",[s._v("null")]),s._v(", and the default alignment is null. Take "),a("code",[s._v('placement="left-end"')]),s._v(" for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"box"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Top Left prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top-start"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top-start"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Top Center prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Top Right prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top-end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top-end"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Left Top prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left-start"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left-start"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Left Center prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Left Bottom prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left-end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left-end"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Right Top prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right-start"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right-start"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Right Center prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Right Bottom prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right-end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right-end"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom Left prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom Center prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom Right prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom-end"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Dark\n\n\n Light\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("effect")]),s._v(" to modify theme, and the default value is "),a("code",[s._v("dark")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Top center"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom center"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Display multiple lines of text and set their format.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    multiple lines
    second line
    \n Top center\n    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{attrs:{slot:"content"},slot:"content"},[s._v("multiple lines"),a("br"),s._v("second line")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("Override attribute "),a("code",[s._v("content")]),s._v(" of "),a("code",[s._v("el-tooltip")]),s._v(" by adding a slot named "),a("code",[s._v("content")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"content"')]),s._v(">")]),s._v("multiple lines"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("br")]),s._v("/>")]),s._v("second line"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),s._m(6),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .slide-fade-enter-active {\n transition: all .3s ease;\n }\n .slide-fade-leave-active {\n transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n }\n .slide-fade-enter, .expand-fade-leave-active {\n margin-left: 20px;\n opacity: 0;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("click to "+s._s(s.disabled?"active":"close")+" tooltip function")])],1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click to close tooltip function"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("click to {{disabled ? 'active' : 'close'}} tooltip function"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-enter-active")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("transition")]),s._v(": all ."),a("span",{attrs:{class:"hljs-number"}},[s._v("3s")]),s._v(" ease;\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-leave-active")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("transition")]),s._v(": all ."),a("span",{attrs:{class:"hljs-number"}},[s._v("3s")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("cubic-bezier")]),s._v("(1.0, 0.5, 0.8, 1.0);\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-enter")]),s._v(", "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".expand-fade-leave-active")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Theme")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip has two themes: "),a("code",{pre:!0},[s._v("dark")]),s._v(" and "),a("code",{pre:!0},[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",{pre:!0},[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",{pre:!0},[s._v("disabled")]),s._v(" attribute allows you to disable "),a("code",{pre:!0},[s._v("tooltip")]),s._v(". You just need set it to "),a("code",{pre:!0},[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",{pre:!0},[s._v("router-link")]),s._v(" component is not supported in tooltip, please use "),a("code",{pre:!0},[s._v("vm.$router.push")]),s._v(".")]),a("p",[s._v("Disabled form elements are not supported for Tooltip, more information can be found at "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v(". You need to wrap the disabled form element with a container element for Tooltip to work.")])])},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",{pre:!0},[s._v("slot#content")])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("position of Tooltip")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("visibility of Tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tooltip is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset of the Tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("animation name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether an arrow is displayed. For more information, check "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" page")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" parameters")]),a("td",[s._v("Object")]),a("td",[s._v("refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" doc")]),a("td",[a("code",{pre:!0},[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("whether to control Tooltip manually. "),a("code",{pre:!0},[s._v("mouseenter")]),s._v(" and "),a("code",{pre:!0},[s._v("mouseleave")]),s._v(" won't have effects if set to "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Tooltip's popper")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("whether the mouse can enter the tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("hide-after")]),a("td",[s._v("timeout in milliseconds to hide tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1236)},function(s,t,a){"use strict";function l(s){a(1237)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1239),n=a.n(e),r=a(1240),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1238);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("06dfca66",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-transfer .transfer-footer{margin-left:15px;padding:6px 5px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{data:function(s){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4==0});return t}(),data2:function(s){var t=[],a=["CA","IL","MD","TX","FL","CO","CT"];return["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(s,l){t.push({label:s,key:l,initial:a[l]})}),t}(),data3:function(s){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"Option "+a,disabled:a%4==0});return t}(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,t){return t.initial.toLowerCase().indexOf(s.toLowerCase())>-1},renderFunc:function(s,t){return s("span",null,[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value1: [1, 4]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})]],2),a("p",[s._v("Data is passed to Transfer via the "),a("code",[s._v("data")]),s._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),a("code",[s._v("key")]),s._v(" being the identification of the data item, "),a("code",[s._v("label")]),s._v(" being the displayed text, and "),a("code",[s._v("disabled")]),s._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),a("code",[s._v("v-model")]),s._v(", and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the "),a("code",[s._v("v-model")]),s._v(" with an array.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData = "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),a("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": i,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Option "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": generateData(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v("]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can search and filter data items.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n const generateData2 = _ => {\n const data = [];\n const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n states.forEach((city, index) => {\n data.push({\n label: city,\n key: index,\n initial: initials[index]\n });\n });\n return data;\n };\n return {\n data2: generateData2(),\n value2: [],\n filterMethod(query, item) {\n return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-transfer",{attrs:{filterable:"","filter-method":s.filterMethod,"filter-placeholder":"State Abbreviations",data:s.data2},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Set the "),a("code",[s._v("filterable")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to enable filter mode. By default, if the data item "),a("code",[s._v("label")]),s._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),a("code",[s._v("filter-method")]),s._v(" attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filterMethod"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filter-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"State Abbreviations"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData2 = "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" states = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Illinois'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Maryland'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Texas'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Colorado'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Connecticut '")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" initials = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'IL'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MD'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TX'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'FL'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CO'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CT'")]),s._v("];\n states.forEach("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n data.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": city,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": index,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("initial")]),s._v(": initials[index]\n });\n });\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": generateData2(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": [],\n filterMethod(query, item) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" item.initial.toLowerCase().indexOf(query.toLowerCase()) > "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n }\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value3: [1],\n renderFunc(h, option) {\n return { option.key } - { option.label };\n }\n };\n },\n\n methods: {\n handleChange(value, direction, movedKeys) {\n console.log(value, direction, movedKeys);\n }\n }\n };\n",style:"\n .transfer-footer {\n margin-left: 20px;\n padding: 6px 5px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-transfer",{attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[s._v("Operation")]),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[s._v("Operation")])],1)]],2),a("p",[s._v("Use "),a("code",[s._v("titles")]),s._v(", "),a("code",[s._v("button-texts")]),s._v(", "),a("code",[s._v("render-content")]),s._v(" and "),a("code",[s._v("format")]),s._v(" to respectively customize list titles, button texts, render function for data items, checking status texts in list header. For list footer contents, two named slots are provided: "),a("code",[s._v("left-footer")]),s._v(" and "),a("code",[s._v("right-footer")]),s._v(". Plus, if you want some items initially checked, you can use "),a("code",[s._v("left-default-checked")]),s._v(" and "),a("code",[s._v("right-default-checked")]),s._v(". Finally, this example demonstrate the "),a("code",[s._v("change")]),s._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":left-default-checked")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":right-default-checked")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[1]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":render-content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"renderFunc"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":titles")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['Source', 'Target']\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":button-texts")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['To left', 'To right']\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n noChecked: '${total}',\n hasChecked: '${checked}/${total}'\n }\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left-footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right-footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transfer-footer")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6px")]),s._v(" "),a("span",{attrs:{class:"hljs-number"}},[s._v("5px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData = "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),a("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": i,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Option "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": generateData(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("],\n renderFunc(h, option) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"xml"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")])]),s._v(";\n }\n };\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value, direction, movedKeys) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n const generateData3 = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n value: i,\n desc: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data3: generateData3(),\n value4: []\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})]],2),a("p",[s._v("The data items in this example do not have "),a("code",[s._v("key")]),s._v("s or "),a("code",[s._v("label")]),s._v("s, instead they have "),a("code",[s._v("value")]),s._v("s and "),a("code",[s._v("desc")]),s._v("s. So you need to set aliases for "),a("code",[s._v("key")]),s._v(" and "),a("code",[s._v("label")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n key: 'value',\n label: 'desc'\n }\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData3 = "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),a("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": i,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Option "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data3")]),s._v(": generateData3(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": []\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"transfer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prop-aliases"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prop aliases")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("By default, Transfer looks for "),a("code",{pre:!0},[s._v("key")]),s._v(", "),a("code",{pre:!0},[s._v("label")]),s._v(" and "),a("code",{pre:!0},[s._v("disabled")]),s._v(" in a data item. If your data items have different key names, you can use the "),a("code",{pre:!0},[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("format")]),a("td",[s._v("texts for checking status in list header")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("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:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearQuery")]),a("td",[s._v("clear the filter keyword of a certain panel")]),a("td",[s._v("'left' / 'right'")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when data items change in the right list")]),a("td",[s._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1242)},function(s,t,a){"use strict";function l(s){a(1243)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1245),n=a.n(e),r=a(1246),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1244);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("325eab2e",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".transition-box{margin-bottom:10px;width:200px;height:100px;border-radius:4px;background-color:#409eff;text-align:center;color:#fff;padding:40px 20px;margin-right:20px;box-sizing:border-box}",""])},function(s,t,a){"use strict";s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show=!s.show}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),a("p",[s._v("We have two fading effects: "),a("code",[s._v("el-fade-in-linear")]),s._v(" and "),a("code",[s._v("el-fade-in")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show2: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show2=!s.show2}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),a("p",[a("code",[s._v("el-zoom-in-center")]),s._v(", "),a("code",[s._v("el-zoom-in-top")]),s._v(" and "),a("code",[s._v("el-zoom-in-bottom")]),s._v(" are provided.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show3: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show3=!s.show3}}},[s._v("Click Me")]),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")]),a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")])])])],1)],1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show3")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"built-in-transition"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[s._v("¶")]),s._v(" Built-in transition")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use Element's built-in transitions directly. Before that, please read the "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[s._v("transition docs")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fade"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[s._v("¶")]),s._v(" fade")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[s._v("¶")]),s._v(" zoom")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("For collapse effect, use the "),a("code",{pre:!0},[s._v("el-collapse-transition")]),s._v(" component.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-js"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("// fade/zoom")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-chalk/base.css'")]),s._v(";\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// collapse")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" CollapseTransition "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/transitions/collapse-transition'")]),s._v(";\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1248)},function(s,t,a){"use strict";function l(s){a(1249)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1251),n=a.n(e),r=a(1252),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1250);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("68540d62",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-tree .leaf{width:20px;background:#ddd}.demo-tree .folder{width:20px;background:#888}.demo-tree .buttons,.demo-tree .filter-tree{margin-top:20px}.demo-tree .custom-tree-container{display:-ms-flexbox;display:flex;margin:-24px}.demo-tree .block{-ms-flex:1;flex:1;padding:8px 24px 24px}.demo-tree .block>p{text-align:center;margin:0;line-height:4}.demo-tree .block:first-child{border-right:1px solid #eff2f6}.demo-tree .custom-tree-node{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;font-size:14px;padding-right:8px}",""])},function(s,t,a){"use strict";t.__esModule=!0;var l=[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],e=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],n=[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],r=1e3,v=[{name:"region1"},{name:"region2"}],_=1,c={label:"name",children:"zones"},i={label:"name",children:"zones",isLeaf:"leaf"},o={children:"children",label:"label"};t.default={watch:{filterText:function(s){this.$refs.tree2.filter(s)}},methods:{handleCheckChange:function(s,t,a){console.log(s,t,a)},handleNodeClick:function(s){console.log(s)},loadNode:function(s,t){if(0===s.level)return t([{name:"Root1"},{name:"Root2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s=void 0;s=a?[{name:"zone"+_++},{name:"zone"+_++}]:[],t(s)},500)},loadNode1:function(s,t){return 0===s.level?t([{name:"region"}]):s.level>1?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)},getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Level two 2-1"},{id:9,label:"Level three 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])},append:function(s){var t={id:r++,label:"testtest",children:[]};s.children||this.$set(s,"children",[]),s.children.push(t)},remove:function(s,t){var a=s.parent,l=a.data.children||a.data,e=l.findIndex(function(s){return s.id===t.id});l.splice(e,1)},renderContent:function(s,t){var a=this,l=t.node,e=t.data;t.store;return s("span",{class:"custom-tree-node"},[s("span",null,[l.label]),s("span",null,[s("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.append(e)}}},["Append"]),s("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.remove(l,e)}}},["Delete"])])])},filterNode:function(s,t){return!s||-1!==t.label.indexOf(s)}},data:function(){return{data:l,data2:e,data3:n,data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e)),regions:v,defaultProps:o,props:c,props1:i,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t,a){"use strict";var l=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:'\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",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@node-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used for node selection.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n props: {\n label: 'name',\n children: 'zones'\n },\n count: 1\n };\n },\n methods: {\n handleCheckChange(data, checked, indeterminate) {\n console.log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n console.log(data);\n },\n loadNode(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n }\n if (node.level > 3) return resolve([]);\n\n var hasChild;\n if (node.data.name === 'region1') {\n hasChild = true;\n } else if (node.data.name === 'region2') {\n hasChild = false;\n } else {\n hasChild = Math.random() > 0.5;\n }\n\n setTimeout(() => {\n var data;\n if (hasChild) {\n data = [{\n name: 'zone' + this.count++\n }, {\n name: 'zone' + this.count++\n }];\n } else {\n data = [];\n }\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("p",[s._v("This example also shows how to load node data asynchronously.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":load")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"loadNode"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("lazy")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@check-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'name'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zones'")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("count")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCheckChange(data, checked, indeterminate) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n },\n loadNode(node, resolve) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([{ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Root1'")]),s._v(" }, { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Root2'")]),s._v(" }]);\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level > "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(") "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([]);\n\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" hasChild;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.data.name === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'region1'")]),s._v(") {\n hasChild = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.data.name === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'region2'")]),s._v(") {\n hasChild = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n hasChild = "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random() > "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v(";\n }\n\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" data;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (hasChild) {\n data = [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v(" + "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".count++\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v(" + "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".count++\n }];\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n data = [];\n }\n\n resolve(data);\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("500")]),s._v(");\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n props1: {\n label: 'name',\n children: 'zones',\n isLeaf: 'leaf'\n },\n };\n },\n methods: {\n loadNode1(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'region' }]);\n }\n if (node.level > 1) return resolve([]);\n\n setTimeout(() => {\n const data = [{\n name: 'leaf',\n leaf: true\n }, {\n name: 'zone'\n }];\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{props:s.props1,load:s.loadNode1,lazy:"","show-checkbox":""}})],1),a("p",[s._v("A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":load")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"loadNode1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("lazy")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props1")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'name'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zones'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("isLeaf")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'leaf'")]),s._v("\n },\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n loadNode1(node, resolve) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([{ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'region'")]),s._v(" }]);\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level > "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([]);\n\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'leaf'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("leaf")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v("\n }];\n\n resolve(data);\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("500")]),s._v(");\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("The checkbox of a node can be set as disabled.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data3: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 3,\n label: 'Level two 2-1',\n children: [{\n id: 4,\n label: 'Level three 3-1-1'\n }, {\n id: 5,\n label: 'Level three 3-1-2',\n disabled: true\n }]\n }, {\n id: 2,\n label: 'Level two 2-2',\n disabled: true,\n children: [{\n id: 6,\n label: 'Level three 3-2-1'\n }, {\n id: 7,\n label: 'Level three 3-2-2',\n disabled: true\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label',\n disabled: 'disabled',\n },\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data3,props:s.defaultProps,"show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("p",[s._v("In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@check-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }]\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disabled'")]),s._v(",\n },\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Tree nodes can be initially expanded or checked")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("Use "),a("code",[s._v("default-expanded-keys")]),s._v(" and "),a("code",[s._v("default-checked-keys")]),s._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),a("code",[s._v("node-key")]),s._v(" is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-expanded-keys")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-checked-keys")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[5]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n
    \n get by node\n get by key\n set by node\n set by key\n reset\n
    \n\n\n',script:"\n export default {\n methods: {\n getCheckedNodes() {\n console.log(this.$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n console.log(this.$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n this.$refs.tree.setCheckedNodes([{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 9,\n label: 'Level three 1-1-1'\n }]);\n },\n setCheckedKeys() {\n this.$refs.tree.setCheckedKeys([3]);\n },\n resetChecked() {\n this.$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:s.getCheckedNodes}},[s._v("get by node")]),a("el-button",{on:{click:s.getCheckedKeys}},[s._v("get by key")]),a("el-button",{on:{click:s.setCheckedNodes}},[s._v("set by node")]),a("el-button",{on:{click:s.setCheckedKeys}},[s._v("set by key")]),a("el-button",{on:{click:s.resetChecked}},[s._v("reset")])],1)],1),a("p",[s._v("This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, "),a("code",[s._v("node-key")]),s._v(" is required.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tree"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("highlight-current")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"buttons"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("get by node"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("get by key"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("set by node"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("set by key"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"resetChecked"')]),s._v(">")]),s._v("reset"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n getCheckedNodes() {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }]);\n },\n setCheckedKeys() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v("]);\n },\n resetChecked() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),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:'
    \n
    \n

    Using render-content

    \n \n \n
    \n
    \n

    Using scoped slot

    \n \n \n {{ node.label }}\n \n \n Append\n \n \n Delete\n \n \n \n \n
    \n
    \n\n\n\n\n',script:"\n let id = 1000;\n\n export default {\n data() {\n const data = [{\n id: 1,\n label: '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 return {\n data4: JSON.parse(JSON.stringify(data)),\n data5: JSON.parse(JSON.stringify(data))\n }\n },\n\n methods: {\n append(data) {\n const newChild = { id: id++, label: 'testtest', children: [] };\n if (!data.children) {\n this.$set(data, 'children', []);\n }\n data.children.push(newChild);\n },\n\n remove(node, data) {\n const parent = node.parent;\n const children = parent.data.children || parent.data;\n const index = children.findIndex(d => d.id === data.id);\n children.splice(index, 1);\n },\n\n renderContent(h, { node, data, store }) {\n return (\n \n {node.label}\n \n this.append(data) }>Append\n this.remove(node, data) }>Delete\n \n );\n }\n }\n };\n",style:"\n .custom-tree-node {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n padding-right: 8px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"custom-tree-container"},[a("div",{staticClass:"block"},[a("p",[s._v("Using render-content")]),a("el-tree",{attrs:{data:s.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("div",{staticClass:"block"},[a("p",[s._v("Using scoped slot")]),a("el-tree",{attrs:{data:s.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:s._u([{key:"default",fn:function(t){var l=t.node,e=t.data;return a("span",{staticClass:"custom-tree-node"},[a("span",[s._v(s._s(l.label))]),a("span",[a("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return s.append(e)}}},[s._v("\n Append\n ")]),a("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return s.remove(l,e)}}},[s._v("\n Delete\n ")])],1)])}}])})],1)])]),a("p",[s._v("There are two ways to customize template for tree nodes: "),a("code",[s._v("render-content")]),s._v(" and scoped slot. Use "),a("code",[s._v("render-content")]),s._v(" to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. If you prefer scoped slot, you'll have access to "),a("code",[s._v("node")]),s._v(" and "),a("code",[s._v("data")]),s._v(" in the scope, standing for the TreeNode object and node data of the current node respectively. Note that the "),a("code",[s._v("render-content")]),s._v(" demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"custom-tree-container"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Using render-content"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":expand-on-click-node")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":render-content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"renderContent"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Using scoped slot"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":expand-on-click-node")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"custom-tree-node"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"{ node, data }"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{ node.label }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"() => append(data)"')]),s._v(">")]),s._v("\n Append\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"() => remove(node, data)"')]),s._v(">")]),s._v("\n Delete\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"actionscript"}},[s._v("\n let id = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(";\n\n export "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [{\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n children: [{\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n children: [{\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n children: [{\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n children: [{\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n data4: JSON.parse(JSON.stringify(data)),\n data5: JSON.parse(JSON.stringify(data))\n }\n },\n\n methods: {\n append(data) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" newChild = { id: id++, label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'testtest'")]),s._v(", children: [] };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!data.children) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("set")]),s._v("(data, "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(", []);\n }\n data.children.push(newChild);\n },\n\n remove(node, data) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" parent = node.parent;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" children = parent.data.children || parent.data;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" index = children.findIndex(d => d.id === data.id);\n children.splice(index, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n },\n\n renderContent(h, { node, data, store }) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (\n \n <'),a("span",{attrs:{class:"hljs-title"}},[s._v("span")]),s._v(">")]),s._v("{node.label}\n \n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".append(data) }>Append\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".remove(node, data) }>Delete\n \n );\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".custom-tree-node")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("flex")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": flex;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": space-between;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("8px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Tree nodes can be filtered")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n\n',script:"\n export default {\n watch: {\n filterText(val) {\n this.$refs.tree2.filter(val);\n }\n },\n\n methods: {\n filterNode(value, data) {\n if (!value) return true;\n return data.label.indexOf(value) !== -1;\n }\n },\n\n data() {\n return {\n filterText: '',\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:s.filterText,callback:function(t){s.filterText=t},expression:"filterText"}}),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),a("p",[s._v("Invoke the "),a("code",[s._v("filter")]),s._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),a("code",[s._v("filter-node-method")]),s._v(" is required, and its value is the filtering method.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Filter keyword"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filter-tree"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":filter-node-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filterNode"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("watch")]),s._v(": {\n filterText(val) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n }\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n filterNode(value, data) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!value) "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n }\n },\n\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("Only one node among the same level can be expanded at one time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@node-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"selectable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selectable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-leaf-node-in-lazy-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-leaf-node-in-lazy-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom leaf node in lazy mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"default-expanded-and-default-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default expanded and default checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checking-tree-nodes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checking tree nodes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-node-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom node content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tree-node-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree node filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("tree data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("text displayed when data is void")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("unique identity key name for nodes, its value should be unique across the whole tree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-after-expand")]),a("td",[s._v("whether to render child nodes only after a parent node is expanded for the first time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("method for loading subtree data, only works when "),a("code",{pre:!0},[s._v("lazy")]),s._v(" is true")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("render function for tree node")]),a("td",[s._v("Function(h, { node, data, store }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("whether current node is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("whether to expand all nodes by default")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("td",[s._v("whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.")]),a("td",[s._v("—")]),a("td",[s._v("true")]),a("td")]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("whether to expand father node when a child node is expanded")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("array of keys of initially expanded nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("whether node is selectable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("whether checked state of a node not affects its father and child nodes when "),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" is "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("array of keys of initially checked nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("this function will be executed on each node when use filter method. if return "),a("code",{pre:!0},[s._v("false")]),s._v(", tree node will be hidden.")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether only one node among the same level can be expanded at one time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("horizontal indentation of nodes in adjacent levels in pixels")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])]),a("tr",[a("td",[s._v("lazy")]),a("td",[s._v("whether to lazy load leaf node, used with "),a("code",{pre:!0},[s._v("load")]),s._v(" attribute")]),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:"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, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which node object is used as the node's subtree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of node object represents if node's checkbox is disabled")]),a("td",[s._v("boolean, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("isLeaf")]),a("td",[s._v("specify whether the node is a leaf node, only works when lazy load is enabled")]),a("td",[s._v("boolean, function(data, node)")]),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",{pre:!0},[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("updateKeyChildren")]),a("td",[s._v("set new data to node, only works when "),a("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(key, data) Accept two parameters: 1. key of node 2. new data")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("If the node can be selected ("),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" is "),a("code",{pre:!0},[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",{pre:!0},[s._v("false")]),s._v(". If the parameter is "),a("code",{pre:!0},[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",{pre:!0},[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",{pre:!0},[s._v("show-checkbox")]),s._v(" is "),a("code",{pre:!0},[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",{pre:!0},[s._v("false")]),s._v(". If the parameter is "),a("code",{pre:!0},[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",{pre:!0},[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",{pre:!0},[s._v("false")]),s._v(". If the parameter is "),a("code",{pre:!0},[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",{pre:!0},[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.")])]),a("tr",[a("td",[s._v("getHalfCheckedNodes")]),a("td",[s._v("If the node can be selected ("),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v("), it returns the currently half selected array of nodes")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("getHalfCheckedKeys")]),a("td",[s._v("If the node can be selected ("),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v("), it returns the currently half selected array of node's keys")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("getCurrentKey")]),a("td",[s._v("return the highlight node's key (null if no node is highlighted)")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("getCurrentNode")]),a("td",[s._v("return the highlight node (null if no node is highlighted)")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("setCurrentKey")]),a("td",[s._v("set highlighted node by key, only works when "),a("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(key) the node's key to be highlighted")])]),a("tr",[a("td",[s._v("setCurrentNode")]),a("td",[s._v("set highlighted node, only works when "),a("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(node) the node to be highlighted")])]),a("tr",[a("td",[s._v("getNode")]),a("td",[s._v("get node by data or key")]),a("td",[s._v("(data) the node's data or key")])]),a("tr",[a("td",[s._v("remove")]),a("td",[s._v("remove a node")]),a("td",[s._v("(data) the node's data or node to be deleted")])]),a("tr",[a("td",[s._v("append")]),a("td",[s._v("append a child node to a given node in the tree")]),a("td",[s._v("(data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node")])]),a("tr",[a("td",[s._v("insertBefore")]),a("td",[s._v("insert a node before a given node in the tree")]),a("td",[s._v("(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node")])]),a("tr",[a("td",[s._v("insertAfter")]),a("td",[s._v("insert a node after a given node in the tree")]),a("td",[s._v("(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("triggers when a node is clicked")]),a("td",[s._v("three parameters: node object corresponding to the node clicked, "),a("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("node-contextmenu")]),a("td",[s._v("triggers when a node is clicked by right button")]),a("td",[s._v("four parameters: event, node object corresponding to the node clicked, "),a("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("triggers when the selected state of the node changes")]),a("td",[s._v("three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes")])]),a("tr",[a("td",[s._v("check")]),a("td",[s._v("triggers after clicking the checkbox of a node")]),a("td",[s._v("two parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current node changes")]),a("td",[s._v("two parameters: node object corresponding to the current node, "),a("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("triggers when current node open")]),a("td",[s._v("three parameters: node object corresponding to the node opened, "),a("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("triggers when current node close")]),a("td",[s._v("three parameters: node object corresponding to the node closed, "),a("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Scoped 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 for tree nodes. The scope parameter is { node, data }")])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1254)},function(s,t,a){"use strict";function l(s){a(1255)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1257),n=a(0),r=l,v=n(null,e.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var l=a(1256);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("5b9dc64d",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".demo-typo-box{height:200px;width:200px;position:relative;border:1px solid #eaeefb;font-size:40px;color:#1f2d3d;text-align:center;line-height:162px;padding-bottom:36px;box-sizing:border-box;display:inline-block;margin-right:17px;border-radius:4px}.demo-typo-box .name{position:absolute;bottom:0;width:100%;height:35px;border-top:1px solid #eaeefb;font-size:14px;color:#8492a6;line-height:35px;text-align:left;text-indent:10px;font-family:Helvetica Neue}.demo-typo-size .h1{font-size:20px}.demo-typo-size .h2{font-size:18px}.demo-typo-size .h3{font-size:16px}.demo-typo-size .text-regular{font-size:14px}.demo-typo-size .text-small{font-size:13px}.demo-typo-size .text-smaller{font-size:12px}.demo-typo-size .color-dark-light{color:#99a9bf}.typo-PingFang{font-family:PingFang SC}.typo-Hiragino{font-family:Hiragino Sans GB}.typo-Microsoft{font-family:Microsoft YaHei}.typo-Helvetica-Neue{font-family:Helvetica Neue}.typo-Helvetica{font-family:Helvetica}.typo-Arial{font-family:Arial}",""])},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography")]),a("p",[s._v("We create a font convention to ensure the best presentation across different platforms.")]),a("h3",{attrs:{id:"chinese-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chinese-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" Chinese Font")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"english-numberic-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#english-numberic-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" English / Numberic Font")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-css"}},[a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("font-family")]),s._v(': "'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Neue")]),s._v('",'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(',"'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("PingFang")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("SC")]),s._v('","'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Hiragino")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Sans")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("GB")]),s._v('","'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Microsoft")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Arial")]),s._v(","),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"font-convention"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font Convention")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("Main Title")]),a("td",{staticClass:"h1"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("20px Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("Title")]),a("td",{staticClass:"h2"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("Small Title")]),a("td",{staticClass:"h3"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("Body")]),a("td",{staticClass:"text-regular"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("Body (small)")]),a("td",{staticClass:"text-small"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("Supplementary text")]),a("td",{staticClass:"text-smaller"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}],n={render:l,staticRenderFns:e};t.a=n},function(s,t,a){s.exports=a(1259)},function(s,t,a){"use strict";function l(s){a(1260)}Object.defineProperty(t,"__esModule",{value:!0});var e=a(1262),n=a.n(e),r=a(1263),v=a(0),_=l,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(1261);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(598)("59e1eea2",l,!0)},function(s,t,a){t=s.exports=a(111)(void 0),t.push([s.i,".upload-tip{color:#8492a6;font-size:12px;margin-top:7px}.demo-box{margin-bottom:24px}.demo-box .upload-demo{width:360px}.demo-box .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.demo-box .avatar-uploader .el-upload:focus,.demo-box .avatar-uploader .el-upload:hover{border-color:#409eff}.demo-box .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.demo-box .avatar-uploader .avatar{width:178px;height:178px;display:block}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList2:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList3:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],imageUrl:"",dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(s,t){console.log(s,t)},beforeUpload:function(s){return!(s.size>4e7)||(console.warn(s.name+" is too large!"),!1)},handlePreview:function(s){console.log(s)},handlePictureCardPreview:function(s){this.dialogImageUrl=s.url,this.dialogVisible=!0},submitUpload:function(){this.$refs.upload.submit()},handleAvatarSuccess:function(s,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(s){var t="image/jpeg"===s.type,a=s.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),a||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)},handleExceed:function(s,t){this.$message.warning("You can upload up to 3 files. You selected "+s.length+" files this time, and "+(s.length+t.length)+" files totally")},beforeRemove:function(s,t){return this.$confirm("确定移除 "+s.name+"？")}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Upload files by clicking or drag-and-drop")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n },\n handleExceed(files, fileList) {\n this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);\n },\n beforeRemove(file, fileList) {\n return this.$confirm(`确定移除 ${ file.name }？`);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"before-remove":s.beforeRemove,multiple:"",limit:3,"on-exceed":s.handleExceed,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("p",[s._v("Customize upload button type and text using "),a("code",[s._v("slot")]),s._v(". Set "),a("code",[s._v("limit")]),s._v(" and "),a("code",[s._v("on-exceed")]),s._v(" to limit the maximum number of uploads allowed and specify method when the limit is exceeded. Plus, you can abort removing a file in the "),a("code",[s._v("before-remove")]),s._v(" hook.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":before-remove")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beforeRemove"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":limit")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-exceed")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleExceed"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileList"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fileList")]),s._v(": [{"),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file);\n },\n handleExceed(files, fileList) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.warning("),a("span",{attrs:{class:"hljs-string"}},[s._v("`The limit is 3, you selected "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${files.length}")]),s._v(" files this time, add up to "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${files.length + fileList.length}")]),s._v(" totally`")]),s._v(");\n },\n beforeRemove(file, fileList) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{attrs:{class:"hljs-string"}},[s._v("`确定移除 "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${ file.name }")]),s._v("？`")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n imageUrl: ''\n };\n },\n methods: {\n handleAvatarSuccess(res, file) {\n this.imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n const isJPG = file.type === 'image/jpeg';\n const isLt2M = file.size / 1024 / 1024 < 2;\n\n if (!isJPG) {\n this.$message.error('Avatar picture must be JPG format!');\n }\n if (!isLt2M) {\n this.$message.error('Avatar picture size can not exceed 2MB!');\n }\n return isJPG && isLt2M;\n }\n }\n }\n",style:"\n .avatar-uploader .el-upload {\n border: 1px dashed #d9d9d9;\n border-radius: 6px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n .avatar-uploader .el-upload:hover {\n border-color: #409EFF;\n }\n .avatar-uploader-icon {\n font-size: 28px;\n color: #8c939d;\n width: 178px;\n height: 178px;\n line-height: 178px;\n text-align: center;\n }\n .avatar {\n width: 178px;\n height: 178px;\n display: block;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?a("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"avatar-uploader"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":show-file-list")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-success")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleAvatarSuccess"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":before-upload")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"imageUrl"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"imageUrl"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"avatar"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-upload")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1px")]),s._v(" dashed "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d9d9d9")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("position")]),s._v(": relative;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("overflow")]),s._v(": hidden;\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-upload")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":hover")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader-icon")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("28px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#8c939d")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("imageUrl")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleAvatarSuccess(res, file) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'image/jpeg'")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" / "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" < "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(";\n\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!isJPG) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Avatar picture must be JPG format!'")]),s._v(");\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!isLt2M) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Avatar picture size can not exceed 2MB!'")]),s._v(");\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" isJPG && isLt2M;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n\n\n \n\n\n',script:"\n export default {\n data() {\n return {\n dialogImageUrl: '',\n dialogVisible: false\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePictureCardPreview(file) {\n this.dialogImageUrl = file.url;\n this.dialogVisible = true;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),a("el-dialog",{attrs:{visible:s.dialogVisible},on:{"update:visible":function(t){s.dialogVisible=t}}},[a("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("list-type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"picture-card"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handlePictureCardPreview"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-plus"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100%"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogImageUrl"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("alt")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dialogImageUrl")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dialogVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePictureCardPreview(file) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dialogVisible = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileList2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("list-type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"picture"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fileList2")]),s._v(": [{"),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList3: [{\n name: 'food.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }, {\n name: 'food2.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }]\n };\n },\n methods: {\n handleChange(file, fileList) {\n this.fileList3 = fileList.slice(-3);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileList3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fileList3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'finished'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'finished'")]),s._v("\n }]\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(file, fileList) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{attrs:{class:"hljs-number"}},[s._v("-3")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("You can drag your file to a certain area to upload it.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Drop file here or click to upload
    \n
    jpg/png files with a size less than 500kb
    \n    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,multiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("Drop file here or "),a("em",[s._v("click to upload")])]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("drag")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileList"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__text"')]),s._v(">")]),s._v("Drop file here or "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("em")]),s._v(">")]),s._v("click to upload"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n select file\n upload to server\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n methods: {\n submitUpload() {\n this.$refs.upload.submit();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[a("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[s._v("select file")]),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("upload to server")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":auto-upload")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"trigger"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("select file"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-left: 10px;"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"submitUpload"')]),s._v(">")]),s._v("upload to server"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitUpload() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.upload.submit();\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},e=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"click-to-upload-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Click to upload files")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"user-avatar-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" User avatar upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",{pre:!0},[s._v("before-upload")]),s._v(" hook to limit the upload file format and size.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"photo-wall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[s._v("¶")]),s._v(" Photo Wall")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",{pre:!0},[s._v("list-type")]),s._v(" to change the fileList style.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filelist-with-thumbnail"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[s._v("¶")]),s._v(" FileList with thumbnail")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"file-list-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[s._v("¶")]),s._v(" File list control")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",{pre:!0},[s._v("on-change")]),s._v(" hook function to control upload file list")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"drag-to-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Drag to upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"manual-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Manual upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("action")]),a("td",[s._v("required, request URL")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("headers")]),a("td",[s._v("request headers")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether uploading multiple files is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("data")]),a("td",[s._v("additions options of request")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("key name for uploaded file")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("file")])]),a("tr",[a("td",[s._v("with-credentials")]),a("td",[s._v("whether cookies are sent")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-file-list")]),a("td",[s._v("whether to show the uploaded file list")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("drag")]),a("td",[s._v("whether to activate drag and drop mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("accept")]),a("td",[s._v("accepted "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("file types")]),s._v(", will not work when "),a("code",{pre:!0},[s._v("thumbnail-mode")]),s._v(" is "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-preview")]),a("td",[s._v("hook function when clicking the uploaded files")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-remove")]),a("td",[s._v("hook function when files are removed")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-success")]),a("td",[s._v("hook function when uploaded successfully")]),a("td",[s._v("function(response, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-error")]),a("td",[s._v("hook function when some errors occurs")]),a("td",[s._v("function(err, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-progress")]),a("td",[s._v("hook function when some progress occurs")]),a("td",[s._v("function(event, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-change")]),a("td",[s._v("hook function when select file or upload file success or upload file fail")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-upload")]),a("td",[s._v("hook function before uploading with the file to be uploaded as its parameter. If "),a("code",{pre:!0},[s._v("false")]),s._v(" is returned or a "),a("code",{pre:!0},[s._v("Promise")]),s._v(" is returned and then is rejected, uploading will be aborted")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-remove")]),a("td",[s._v("hook function before removing a file with the file and file list as its parameters. If "),a("code",{pre:!0},[s._v("false")]),s._v(" is returned or a "),a("code",{pre:!0},[s._v("Promise")]),s._v(" is returned and then is rejected, removing will be aborted.")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("thumbnail-mode")]),a("td",[s._v("whether thumbnail is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("file-list")]),a("td",[s._v("default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[]")])]),a("tr",[a("td",[s._v("list-type")]),a("td",[s._v("type of fileList")]),a("td",[s._v("string")]),a("td",[s._v("text/picture/picture-card")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("auto-upload")]),a("td",[s._v("whether to auto upload file")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("http-request")]),a("td",[s._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable upload")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("limit")]),a("td",[s._v("maximum number of uploads allowed")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-exceed")]),a("td",[s._v("hook function when limit is exceeded")]),a("td",[s._v("function(files, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Methods Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearFiles")]),a("td",[s._v("clear the uploaded file list (this method is not supported in the "),a("code",{pre:!0},[s._v("before-upload")]),s._v(" hook)")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("abort")]),a("td",[s._v("cancel upload request")]),a("td",[s._v("（ file: fileList's item ）")])])])])}],n={render:l,staticRenderFns:e};t.a=n}])); \ No newline at end of file diff --git a/2.2/es.072de00.js b/2.2/es.072de00.js new file mode 100644 index 000000000..d2483c05e --- /dev/null +++ b/2.2/es.072de00.js @@ -0,0 +1 @@ +webpackJsonp([1],Array(601).concat([function(s,a,t){function l(s){return t(e(s))}function e(s){var a=n[s];if(!(a+1))throw new Error("Cannot find module '"+s+"'.");return a}var n={"./changelog.vue":702,"./component.vue":710,"./design.vue":715,"./guide.vue":719,"./index.vue":724,"./nav.vue":729,"./resource.vue":734};l.keys=function(){return Object.keys(n)},l.resolve=e,s.exports=l,l.id=601},,,function(s,a,t){function l(s){return t(e(s))}function e(s){var a=n[s];if(!(a+1))throw new Error("Cannot find module '"+s+"'.");return a}var n={"./es/alert.md":1264,"./es/badge.md":1270,"./es/breadcrumb.md":1275,"./es/button.md":1278,"./es/card.md":1283,"./es/carousel.md":1289,"./es/cascader.md":1295,"./es/checkbox.md":1301,"./es/collapse.md":1305,"./es/color-picker.md":1311,"./es/color.md":1317,"./es/container.md":1322,"./es/custom-theme.md":1328,"./es/date-picker.md":1331,"./es/datetime-picker.md":1337,"./es/dialog.md":1343,"./es/dropdown.md":1349,"./es/form.md":1355,"./es/i18n.md":1361,"./es/icon.md":1364,"./es/input-number.md":1370,"./es/input.md":1376,"./es/installation.md":1382,"./es/layout.md":1385,"./es/loading.md":1390,"./es/menu.md":1396,"./es/message-box.md":1402,"./es/message.md":1406,"./es/notification.md":1410,"./es/pagination.md":1414,"./es/popover.md":1420,"./es/progress.md":1426,"./es/quickstart.md":1431,"./es/radio.md":1434,"./es/rate.md":1438,"./es/select.md":1444,"./es/slider.md":1450,"./es/steps.md":1456,"./es/switch.md":1460,"./es/table.md":1466,"./es/tabs.md":1472,"./es/tag.md":1476,"./es/time-picker.md":1482,"./es/tooltip.md":1488,"./es/transfer.md":1494,"./es/transition.md":1500,"./es/tree.md":1506,"./es/typography.md":1512,"./es/upload.md":1517};l.keys=function(){return Object.keys(n)},l.resolve=e,s.exports=l,l.id=604},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAESRJREFUeAHtnW2IHdUZx88zu+vuvZtk12gikYoIyoJFEPvBqEVCrLTWqKWIUomCGPxoIa1WpSBS32ratM3HNlKIYjHkQ9VYC9YgoWryoSJtFZYIQQSDiYm72d177ya78/T/zL1ze/fufZm5d2bumZln4DJv5+U5/+d3z5kzc2YOGV1WKHCW+WJTNlPLZKaI3SnDZoMhWov1Wibjram2NrKWhc0ctue4tqba2jDL8VNMzvQQm2lTMNPriL5ekWHOdyiv5Wfm8dlFcxPguY5cd4qJBLYpNrw+Tk3I0BlAOU3M0+w409j+aGLUvE9EC3Hma2vauQEQwI3OV8zmJdfdihptKwp+PY6N2OAYwHeejTmKGvPQsOMcWjNmjuDYog22xW1DpgGcrfBVaBbvhmNvgYNvxLoQt6CRpE9UhmM+wB/lXTT3BybG6Fgk6VqYSOYAnGVezyVzryG+HzXcDRZqHtok1IYfGqaXqWhemyA04RlaMgGgNKUzJXM7ATr4Zhv2L8iQj+pFAYjnsHOQAeNk0bwlTXf9ZEo3Ug3gPPMlS2V3J2qHh9B5uCilPujJbHRmTqOWf2m44OxeQ/RVT4lYECmVAJZKfNmicR+DE3agthuzQMeBmYBasII/395R47xYLNIXAzOkx4xTBSA6FVfysvs4Ls4fkGa3xzJnMprXHDPvoyHnBXRaPktLIVMBoNebdd2njaF7AN5QWsQdhJ0AcRl3xveT4zyVht6z1QACtsJMyX0Soj6K7dFBODSteUKzRWi2a7LoPIftsq3lsBbAsxXe5rq8ByJeYat4abAL8B13HHpk3RgdtNFe6wAsl/nyCvMfcNP4LhsFS61NRK+PEf20UKDPbSqDY4sxqOmGZsr8OOD7VOGLwSv4Q4u2orFoHUMOPSVpRQ24wLzpfJlfhTBbeiqFRgqlAJrl90YKdN840YlQEWMIPHAAZyp8q1nmV3Ava2MM5dMk2yiAe6gnzRBtnxyjd9oESeTwwJpgr8ldWH7GuPx3hS8RX6/IxNMc2s/AB4NskgdSAy4s8KXniP+Ca72bV6iiO4NRgOjwBUw/GR+nL5M2IHEAZ0ss4/DexD9wQ9KF1fzaK4Am+RSuDe+YKNLR9qGiP5NoE4wnGre5hg8pfNE7st8UxSfiG/FRv2mFiZ8YgLNl3s4uv4FmtxjGQA2boALwjfhIfJVUrokA+E2Jd6LZ3YffcFIF03x6U0B8JL4Sn/WWQrhYsV4DoiA0W3Z/jWHxj4YzS0PboABeB9g1UXB+gWtDvNEQzxIbgB58JfdPsPyheEzXVJNQAIDsnSg6D8cFYWxNsFfzKXxJMBJrHqhAdogv48oklhrQu35g97dxGa3pDkABcn52YZF2R51z5AB6vd1qhyPytKMuvKYXXAFpgvF7YKJArwSP1T1kpJDIPSTpxktPqnvWGiJtCgDAJXLoToy0fjsq2yMDUJ5wyI1Mvc8XlWssTYeo5BjaGtUTk0gAlGe75w1/rE84LIUmYrPksd2IoWujeHbcdy8Yze2QDCxQ+CL2ssXJia89n0cwsLVvAGdLeFtNR7VYjEtMpsHnnu/7TL6vJtgbTCrj+Zj7BrnPcmj0ASiATolrHPpBP4NaewbQG0Zf8q77dCTzAJxvS5YysnqkiOvBHof391RzyXWf9w6HDqO3hYOB2YHrwY2193l6etGpJwBnK0ZeFN8ysFJrxlYpICwIE70YFboJrr23K69O6ri+XhTPahzcH8R7x1eHfe84dA2Id0v3KHxZpaiPcqFC8tgImUQoAOVzGYDvzpB5aPC8KAA2PEZClDdwE4x2voCBBp9gfUWI9DVozhTArZnjGLDwbawDfRApcA0oX6lS+HJGUw/FFUaElaBRA9WA1e/z8X+ReCa/vRxULA0XTAHUfosYNXNNkO8TBqoBGR+HVPiCiR91qMMffh51krGnB1ZGhZkgGXUFELXflfJl0iCJaZjoFRAA0wihMFNlp7MmXQGUbzKD6J7ucnfOWs8GVSCNEAoz3ve8uxSyI4DyNXr5IHiXNPR0AgqkEUJhx2Oogz4dAZSpEECyfo2+g4BJnkobhMKOMNRJo7YAyiQwGOmwo1NkPZe8AmmDUBgSltop1RZAmYEIBOd6Eph2og36eJogFIa82azaiNYSQK/ZxfRXbeLoYQsUSBOE3lRqbS7lWgIoE/9hnFeu5l6zgKnQJqQFQmFJmGpVwJYA1madbBVej1mmQFogbMfUqkdx3ny7ZT6BZtjKx26fHT9j/vbOMXN2PhcTigfG/eYbLjfys3XB47lzVKBNzfMdr6oBZbJnW+ETcRW+1ojZXhMKU95E4k3mrwIQc9DqjecmkXQ3IgWqE4qvSGwFgN6oF+bNK0JYtvPDW68y69bovIXNbrG9CRZ7UQveIIw12r7iGhDTOD2BUQzPNQbQ7cEq8Mzuw10NSAN8fiEwjeyTkwV63t9fUQMC0Vv8E7pOhwJpgs9TtImxOoCoHkfxNcwb0yG7WikKpA4+2CyMCWu+B+sAzlfMZtSABf+Eru1WII3weYqCMY+1mrx1AJdcd6vdkqt1vgKpha9WgEbW6gBi7JYC6HvY4nXa4fOkbWDNAxBt8ji6w9dbrLuaBgUyAR/KIawJc+JUD8DZRXMTDujAU1HE0iUr8Im8wpowJ9vVJpjNdbKji50KZAm+usI15jwAyXWn6id0wyoFMgkfFPaZq14DEimAVmH3f2MEwCwumHTEY85vghXALHrZ5jKx8Zijs8wXL5fcUzbbqrZlU4GhorPBMeUqidksopbKagXAnrNMCqDVTsqwccKeQ6w94Az72OqiCXsA0Og0C1a7KbvGCXsOusNrs1tELZnNCgh7DgZoKYA2eynLtoE9zLypAGbZx1aXDew5zGaN1UaqcZlVQNhzSGvAzDrY9oIJe3oNaLuXsmyfXgNm2bspKJtXA6bATjUxuwpIEzyX3eJpyaxWAOwN4zbMHCBMzbcA/3nCmGf+Rear8oqPOtR1vqTA5pffYfPdTfVDHTfyll5HMZI+CfbomwX33xilf03Sefea3/cPkjnZBj4/TYHw79vwCnSAJW/pBZAkwSD0H7kRnaomuBt8ol672rGVsnlLr5UGAzsG9mQwQqoAHJhYmnHkCgh7qasBI1dBExycAtUakOcHZ4HmnGsFmOcwHMuczLUIWvjBKUDmFAB0pgdngeacZwWEPWeIjQKYZwoGWHZhzzEFBXCAPsh31mDPWUf0NSaUO5NvJbT0SSsgzAl71S8jkNaCSTsg9/nVmKt+nIhZrwNzT0SyAlCNuerHiRztCScrv+bGNeb8JvgjlUQVSFQBMh5zHoATo+Z9TCZ3PlEDNLPcKiCsCXMiQPUakGgBg5eO5lYRLXiiCghrgHBBMq02wbLFfEhWuqgCsSvQwFodwGHHUQBjV14zEAUaWasDuGbMHMFcIWWVSBWIVQEw5rFWy6QOINrkRbxl8UGsmWviuVdAGBPWfCHqAHoHiN71T+haFYhFgSbGVgCITyUciCVTTVQVqCnQzNgKACfG6Biqxw9VLVUgDgWELWGsMe0VAHonmF5uDKDbqkBkCrRgaxWAVDSvgdRzkWWqCakCUECYEraaxVgF4AR5YwMPNgfUfVWgTwUO1thakcwqAOUst6gqV8TSHVUgpALtmGoJ4GTRvIURq6dD5qHBVYGWCghLwlSrky0BRHt93hC/1CqCHlMFQisAljymWkRsCaCEGy44uxGp0iKOHlIFAisgDAlL7SK0BXAN0VdseG+7iHpcFQiigDAkLLUL2xZAiTBqnBfbVZ3tEtTjqoCvgLAjDPn7rdYdASwW6Qt0ife1iqjHVIGuCoAdj6EOATsCKPFoyHkBJC93SCPRU8tL3e+RBwnjGx0kbJAwaUnPtzPutTAj7HTLpyuAeHb3Ge4M7u+WUFLnT5/4wnQCQs5JmKBL3tILqkv/4Xh/lZ3OKQ13Pl09S47zlHH5x8w8GiR8nGFK82dN6dgnkWWRt/QiE65DQqj9FsmhpzoEqZ/qWgNKSBnBAPh21WPphirQQQFhpXnUS7vggQCUyJNF5zmQfbxdQkkdv3TtSNesNgUI4yeSt/T8cse1FkaElaDpBwYQCZcdhx4JmnBc4X637VumEzRy7vcIE3TJW3pBdek1nDAirASN33qyjQ6xvym5f8Wtmbs6BNFTeVWA6PULi86PwhQ/NIDlMl9eYf4UEBbDZKRhM64AUWmM6OpCgT4PU9LATbCfqGSAKvZX/r6uVQFRQJgIC58Xrxf50MsZmi3zP7De0kt8jZMtBQDfexMF+h7WoR9YhG6CfekWmDedL/HHeNi80T+m6/wpgLF+J0eKdO04EWbxC7+EboL9LLwMh2g7qHf9Y7rOlwKe78FAr/CJWj0DKJEnx+gddEael21dcqgAfO8x0EfRe26C/TzlenCmjC9rMd/sH9N1DhQgOjxZoK29XPc1qtM3gJLYwgJfet5414MbGhPX7WwqgOu+UyMG133j9GW/JeyrCfYzF0PwT7gDffGSf0zXGVUAPhZfRwGfKBQJgJLQRJGO4jHM3TBuSfZ1yZ4C4lvxsfg6qtJFBqAYhBEQb8PIB/HDV1h1yZIC4lPxrfg4ynJFCqAYhhuSr7Chn0dppKY1eAXEp+LbqC2JHEAx8MIi4ZVOo+MHo/bWgNITX4pP48g+kl5wK8Nwe4ZmS+4f0RbvaHVej6VDAQCyd6LoPBzXZVUsNaBIKwZXDdeaMB2orbZSar444fM4WZ1t9Ee+KfFOMvwbqRWjT11TjFoBqTzkmi+uZrfR3sSAwOiZ7QDwz/gFehGq0UjdTk4BwLeE34NxdDhalSIxACXz2Qrf5rp8QAeztnKFBcdwk9m7zxfxrZZOJUsUQDFktsTXoxZ8E8O49LFdJ88kfE4er6HmuyPKm8xBihBbJ6Rd5lJAeY6IXsrhdmH0eMIKwBfik6Thk1ImDqBkKs8RvZEUxjyLf52OJxRRBrCI9mgCnxVfRPVsN2wxEm+Cmw2cqfCtZpnx9ERHVjdrE+e+jGQ2GEza73i+fm0cOIBSAG94f5lfxbXhln4LpPG7K4Ca772RAt3Xz0jm7rkECzGQJrjZNBHCe6nFcZ7QIV3N6kS4L0OpoLFobQN8UjIrasBGiWvvHe/BrZo7G4/rdp8KEL2B93Yf6eXVyT5z7hjdOgB9a89WeBvuGe5Bs3yFf0zX4RVAc3tcPpexboysnPvFWgBFasBXmCm5T0LEx7B9QXj58xsDmi1Cs121j0oF/lZL0opZDaAvBp6gXMWu+zSuGO6BqEP+cV2vVgDg4eVw3i/fdAz6ibTVqSR3JBUA+nIAxCt52X0cHZUHAGL377T5EXOwBnh4L4z3yWdxAR6+apuOJVUA+pKWSnzZonEfw72sHQBxzD+exzXAq8hUCPI1+m4fBLdRn1QC6As5z3zJUtndaZgeghMu8o/nYY0/32mZzUomgek0D4ftWqQaQF9caY5nSuZ2DGO7H8e2YT+THRbUdjJFwEGZ+M+bz0+a3ZQvmQCw0QezzOu5ZO5F7SDXiZsbz6V1G+AdQS2/T+bbbTXlaVrLJXZnDsBGZ3i9ZzZ34+L8FrybciPWhcbz1m7jE7dwzAfobL2LYfEH0tCb7VXLTAPYKApqw9H5itm85Lpb4ditKLiMS7SiJy09WPxBjuIPcmjYcQ6tGTNHcGyx0f6sbucGwGYHAr7x2UVzk2FzHbnuFN66nsL2FDoz65vDRrmPzsMZtDvTeOtimh1nGtsfTYya9wHcQpT5pCWt3ALYzkFnmS82ZTO1TGaK2MXPbAScawHnWsCyFm/roNOJ7dq+lw6bOZybw7k5nJvHOW8fkM3hNayTTM70EJtpUzDT64i+bpd3Ho//Dw7/YlbG4ZiJAAAAAElFTkSuQmCC"},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAE5hJREFUeAHtnXuMXFd9x3+/u7vendm113b8itsUTB5bldKmBCkmaYK7KREWdqpWAQQKQcgW/7RNWoPTJIVGiFeK20gE9Z9iVNVEVIT8g2OUFojrBiXYUklpBVVXQJ0ojeN4be+OvTsz6925p9/fnZ31zOw87ty5j3Nnflca3dd5/M73fOace+49DybdahS4ZMwmKtBEiWmCjTtBhjYT81rs1xomb8/Le5K9bIYu4/iyWd7z8p6MkevThp2pAUNTlKGpdcznayLs8xPu1/QbY0ZzC3Q74Hknu+6EYRbYJgyZjVFqwsQXAeUUGzNlHGcKxy+PD9OLzDwfZby2ht03AAK44bki7Vxy3UmUaJNI+K24NmRDxgC+RUN0CiXm8UHHOT42QidxbcEG26K2oacBzBXNjagW70XG3oUMvg37TNSChhI+cwEZ8xL+KM+jun9mfIR/Hkq4FgbScwDmjNlo8vQhYvNRlHDvtlDzjk1CafgjMvwNztK3xhlVeA9tPQGgVKWzeXo/AzrkzR6cr+mhPFpJCkC8gpNjBjCuz9J3pepeuZnSg1QDOGfM1qWCewClwz40Hq5JaR4EMhuNmQso5b8+mHGeGGN+M1AgFnhKJYD5vLlugdyHkAn7UdqNWKBjYiagFCziz3d4mJwvZ7P8WmKGBIw4VQCiUXGDKbkP4+H8fql2A6a5J7151bExR3jAeRyNll+kJZGpANBrzbruZ4n4gwBvIC3iJmEnQCzhzfjT7DiPpaH1bDWAgC0zm3cfhagHcTycRIamNU5otgDNDq3POl/EccHWdFgL4KWi2eO65kmIuMNW8dJgF+A77Tj8wLoRPmajvdYBWCiYtxSN+QpeGv+BjYKl1ibm74wwP5jJ8Ks2pcGxxRiUdAOzBfMw4PtvhS+CXMEfWrQVjUXrCGIIFKQVJeC8MdcuFsw3IcyuQKlQTx0pgGr5xFCGPzLK/EZHHiNwnDiAs0XzXiqZp/Aua0sE6dMgmyiAd6jnaIDvWz/C32/iJJbLiVXBXpU7X/o8ueafFb5Y8romEk9zaD+LPEiySk6kBJyfN9uvsPknPOvdWaOKniSjAPMLawx/eHSUz8RtQOwA5vJG+uE9i3/g5rgTq/E1VwBV8jSeDfeOZ/lUc1fh34m1CsYXjd0umeMKX/gZ2W2IkieSN5JH3YbVif/YAMwVzH3GNUdR7WY7MVDdxqgA8kbySPIqrlhjAXAmbw6g2j2C32BcCdN4gikgeSR5JXkWLITOfEX6DIiEcK7g/jW6xR/szCx1bYMCGA5waDzj/AWeDTGiIZotMgA9+PLu12D5vmhM11DjUACAHB7POp+ICsLIqmCv5FP44mAk0jhQgOyXvIwqkkhKQO/5wbh/G5XRGm4CCrDzyQ1ZfiLsmEMH0GvtlhscoYcdduI1PP8KSBWM3/3jGX7Kv6/2LkOFRN4hSTNeWlLto1YXaVMAAC6xw/egp/VzYdkeGoDyhUNeZOp7vrCyxtJwmPMO8WRYX0xCAVC+7S6S+Yl+4bAUmpDNks92Q8Q3h/HtuOtWMKrbAelYoPCFnMsWByd57eV5CB1buwYwl8doNe3VYjEuEZmGPPfyvsvgu6qCvc6k0p/PmK5B7jId6j0BBdAoccnh93XTqTUwgF43+rz33Kc9mRPIfFuilJ7VQ1k8Dwbs3h+o5JLnPm8Mh3ajt4WDxOzA8+CW5fE8gQY6BQIwVyQZKL4rsVRrxFYpICwIE0GM6rgKXh63K0MntV9fEMV71Q/eD2Lc8W90Ou644xIQY0ufVPh6laIu0oUCyWOjwyA6KgFluoxSyX22wzgic+6iq8bLmHP+xBmm/8J+GjOgnC8SLWE6+17cBtEtbxMmo9ucIfqtTUS7tmOGdewdi5I7MODs7WQaEN+mo57PoKPBz7DfYUPmfu81oq/+lOn/5nwnwQazQ7fhV8cM/elvGrr7utCDDhQgXs2cRoeFt2Pva0Ik37k3M1/6HCz6dCCrQvQ0i7njD55k+vdzvk0PMXZ7g3rXFkOHdhpab8ccYp/fMDrwGT9q+crF8vx85qco/RKde/mVy0R//EOmM/O+zPaT/p5ys33U0N/dYeit5eVzEksbSr8F9Jp5h5/5CX01Qgwmh0waPin5FL7WTMkfUzQSrZLcwMqwMOPHhrZFCUq/G9DH738QaKAXjX6M8ONm/wmmH0+3NddPUD3v5pbNhg7vimwckS/9UAqWUAr+ervpgtuWgDInc9Lw/QsaHAqfr3z3HIlWolmSmzDjzefdxoiWRYrMRn+FzC8RWGITgsurlnueY3pdn/vaZGXt7V/B8+DR3SbRVzQoBRfXEF/favb+liWgLIWQJHwi6X/g/Z7CVwuXnzPRTLRLchN2hKFWNjQFUBaBQU+H/a08x3HvX19vWUjHYUJq47BBO2FIWGomYlMAZQUiEJz4IjD/eaGZ6Xq9nQI2aCcMeatZNTG2IYBetYvlr5r4ifXyOV/v02M1KTWRWaOdLKXWpB3REEBZ+A/9vKxYe02+7eoWTAFbtBOWhKlGqWgI4PKqk43cx37N7dGOBXEIaZN2zZhaBaCstwtx9sQhkMbRVwrsWWarJtGrAJTFnlFfJ/rNt8ZCPekJBYQpbyHxutSsAhBr0N5f50ZPVYFwFCgvKF4TVg2AXq8XY3bWuNATVSAkBVAKvlsYqw6uBkDMZHpv9U09bqzANoyG+codRKc+UP7JsVzTrb0C9YzVAIixHne1D6K/XQhoz92D79NvI9qCY/nJsVxTCH2wUcfYCoAoHofx3f82H0H0tZNHbqGGvY6lJ7Lc0621AsKYsFZxtQLgXJF2ogTEcBfdWimwc1vzu63uNffVZ3fAmMfacrJXAFxy3ck+k0KTm5AC1aytAEjMCqCPDDl5trmjVvea++rDO1WseQCiTh5Fp6db+1CKjpP8pR9TwzEXMg5D7unWXgFhTZgTlx6AuQW6HRcS6/Xc3mR7XJzNE+0+SnT0f4nO4Vh+cizX5J5u7RUQ1oQ5cVmeTBwD7Nt7UxcVBQS0B39YOdN9IAXKzH3PKwHZdScCBaKeVIGAClSYKz8DMiuAAYVUb8EUwKIjHnMegGRIAQymo/oKqsAyc84lYzahx6r0AdRNFYhNAWFO2HOooKVfbKprRLUKgL3BEgPAZGdxqDXK8rPTH2tt4I5/bH1f715VQNhz2GgL+KokehSnAsIeAKQtcUaqcakCFQWEPQfN4YRnk6uYo/t+U0DYc/D8pwD2W87bkl6wh5U3FUBb8qPv7AB7Dvroj/VdwjXBVigg7DmsJaAVmdGPRgh7+gzYjzlvS5r1GdCWnOhTO7wSsE/Trsm2QwGpgrH6hm6qQAIKgD15DaMAJqC9RgkFwJ68hlEAlYZEFBD2tARMRHqN1FNASkB8ENYSUHlIRAFhT0vARKTXSD0FyiWgmVM5VIFEFDAGjRCmc4lErpGqAkzTANCZUiVUgSQUEPacAUMKYBLqa5wk7DmUUQCVhYQUAHuD65jPz867F3VssL9M0FFv/nRq5wqLGF4U9sozI7CWgu0E0/shK7DMXHlyImP0OTBkfTW41grwMnPlyYkcbQm3lkvvhq2AWWauUgW/HHYEGp4q0FIBJo85D8DxYXqRmRdbetCbqVPALS1ZabOwJsyJceVnQOZ5TA9zykpr1ajACpSW7CxThDVAOC8JK1fBcmTMcdnp1jsKLF7BzOk2blWsrQA46DgKoI2Z1YVNhblcF76j81rN2gqAYyN0EmuFFKKLVkOOVQHj0uCihR2dwJjH2rIYKwCiTl7A+g0vxSqSRhaZApdmztO20ZXsjSyeTgMWxoS1ir9aC5mfr9zQfXoVkNZv7vxZun7jsH2JqGOsBkBMlfCMfRarRR0pgJE+58+8SqVSiXbftK4jr3E4rmesBsDxEf45iscfxWGIxhGNAjPnXqf83CUaGmB6303j0UQSMFRhSxir9l4DoHfD8DeqHehxOhQwrouS7xXKXZz2DN73rk20MTtgl/EN2FoFIGfpWyD1il2WqzWtFCjOX6Y3XpmiudyM52zdyAAdvGNrKy+x3xOmhK36iMtrxVVdHWe+OJt3j+HSH1Vd1kPLFJCGRmH+Es3NXsT+6shaPGPR1/7w1+wr/YiOCVv1Mq4CUBwYr6g0qQRwDq8fFoo9umwlGhilpSVaWrpCi1eKyKf67CT6wt3b6e4b7Wt8lJlabW9DANdn6bu5PF9AL+lrVnux90ruwlmaOfeGvQZGaNnwINNX915HH3jHhghjCRY0ej9fGAdTjXyvegYUR6ivF4nN1xt5sPVaP8N3x44x+sG+m6yEz+MFLHlMNYAHTwyNtzljti4VzCtYXHiksYt4rv7Otxv+R2oi70f4pKFx9w3r6MO/vYEmr7d3oQOAVxzM8FvHmN+sybTlk4ZVsNwTDzP50mEc/smyWyt38sZ/ZvpqtfuxW66hm6/NWGlrt0YNOUxbxgbp2rVraGLzCA21/292G2XX/vEYd3iMnYbwSeBNS0C5mc+b666Q+aUssS7nSWytSsB6+P7s9q302F3bkjBT42yggFS7a4ivz2b5tQa3vUst/0OeR2OONPOc5PV6+P78dxW+JPOjYdxgpxV84qclgOKAB5zHQXJJjm3ZGsH3V5Na8tmSP2KHMCPstLOpLYD4dvcLvBl8ul1Acd3PnX+j5pnvAN74K3xxqd9JPObpMjut/bQFULyz4zwGolf6cLUOMrq7ZfjOrkTwScD3md/Tkm9FEEsOhBVhxo85vgCUHgxoiBzyE2BUbnJo6c5M18L3aYUvKrm7CldYqe/10izAlq3gak8INJMrmJ9hv6P6etTH0gquL/k+dedW+stdWvJFrX2Q8FH6nR7P8Nux9zW8w1cJKIZIgI7DDwQxqhs/Cl836sXvVxjxC59Y5xtAcbxuhI+BxO/IcVxbdbV78M5tWvLFJXyQeMCGx0gHfjsCUMIdYX4QEMbe3eSh92yjR3fZ1cetA5173ymY8NjoMKUdA5jJ8KsoYj/XYTxdORf4HnmPwteViBF7FiaEjU6j8d0IqQ4YDZEBNEh+gP2u6utRHD/+b2/SwwpfFNKGFibgO4GGx+9j3/EHi0AAiuXzxly7mDc/wcfmLaGlRANKnQLo63duKMs3jzJf7RHSQSo6roIrYXsRDvB9oN6tXNN9fyng5T0YCAqfqBUYQPG8foS/j37hX5Jj3fpQAeS9x0AXSQ9cBVfilOfB2QJm1jLmzso13feBAswvrM/wZJDnvmp1ugZQApufN9sXyXse3FwduB73pgJ47pseIjz3jfKZblPYVRVciVwMwT9hbxLvBys26D4mBfC+T/I6DPjE4lAAlIDGs3wKn2HuhXF2zgsrRurWlQKSt5LHktddBVTlOTQAJUz0gHgORn4cvwYjVqti1cPUKSB5KnkreRym8aECKIbhheRThvhTYRqpYSWvgOSp5G3YloQOoBi4IctPYIqIRPsPhi1UP4cneSl5GoUGobSCGxmG1zOcy7t/j7p4f6P7ei0dCgCQw+NZ5xNRPVZFUgKKtGJw2XAtCdOB2morpeSLEj6Pk9XRhn9lJm8OMJm/kVIx/NA1xLAVkMJDnvmiqnar7Y0NCPSeuQ8A/gN+TWdjqDZMj5NRAPAt4ffxKBocjVIUG4ASea5odruueQaf7bKNjNFrCSuAl8zee76QX7W0SlWsAIohuby5FaXgs+jGpZ/tWuVMzPfk8xpKvr1hvmT2k4TIGiHNIpcEyndEtFJeaOZGr8esAPJC8iRu+CSVsQMokcp3RK8nBSb0xL9O+xOKKAlsoj2qwC9IXoT1bbfTZMReBdcbOFs076WSwdcT7Vldr02U59KTmdCZtNv+fN3amDiAkgCve3/BfBPPhru6TZD6b68ASr4TQxn+SDc9mdvH4s9FIlVwvWkihDeoxXEe0S5d9eqEeC5dqaCxaG0DfJIyK0rAaokLBfOWojFP4lXNPdXX9bhLBZiPYtzuA0GGTnYZc0vv1gFYsfZS0ezBO8MnUS3vqFzTfecKoLo9LdNldDpjQecxBfNhLYCSHMCXwaI5j0LEh3C8JlgS+9MXNFuAZofWZ50v4tjXREFJKGU1gBVB8AXlRqyF9lk8MXwQolq2AFrFSjv2gA2Dw83TMj+f3ynSkrQ8FQBWBAKIN5iS+zAaKvcDxMQmTq/YY9Me4GFcmDki0+ICPMxqm44tVQBWJJXZ+xfIfQjvsvYDxETXManYlNQe4BVlKYRhcr7cbkLwpGxsFW8qAawkqLyYjnuADO9DJqRqWbFKGoLu8ee7IKtZDWacJ5otAhM07Dj9pRrAilBSHc/m6f3oxvZRXNuD855ssKC0k2V0j8nCf7Ken1ftVkRI6b4nAKzWPmfMRpOnD6F0kOfEndX30noM0E6ilD8i6+02WvI0rekSu3sOwOrM8FrPhu7Fw/ldGJtyG/bpWMMLr02QMS+hsfU8usU/k4bWbLXunRz3NIDVQqA0HJ4r0s4l151Exk4i4dIv0YqWtFSl+IOcwh/k+KDjHB8boZO4lviyGNX6RXXcNwDWCwj4RnMLdDsZeie77gRGXU/geAKNmY31bsM8R+PhIuqdKYy6mDKOM4Xjl8eH6UUANx9mPGkJq28BbJZBl4zZRAWaKDFNsHHxoy2Acy3gXAtY1mK0DhqdOF4+98IxdBn3LuPeZdybwz3vHJBdxjCsc4adqQFDU5ShqXXM55vF3Y/X/x+UKbnM5rRzPQAAAABJRU5ErkJggg=="},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAHapJREFUeAHtXWuMZMV1rrrdM9Pd857Zx8yyT/Yx2IBjIwdjLEVobUuxjMlDyAiEkSwQfxJhidjYcSIhKwnYJkEKfyIlWFGwZcsWedjGsiXEClmyASdCCbDALCy7yy47uzszO+/unkffyvfdmTvb09Pdc191X9s1Gt3b91adOufUd0+9TlVJ0QobNDCr1DZREiMVKUakMkeEEtuFlN24disprKtcuwpeGZSYw/2cWrvKtatQis/HlTRGM0qMirwY7ZFyYkOGV/kPebXKr5TqnFkUnwJ4bpKmOaKkJNhGlFADOnUihbwMUI5KpUaVYYzi/tXeDvEbKeWCznzjSvuqASAA1zFfFresmOZRWLSjEPwTeNYWh4IB+JaVEK/AYh7LGsaxrpx4Gc8W48Cbbh5SDcCZsjqMavFOFOynUcC34prXrdBA6EtZQsH8Fh/KC6jun+3NyXcCoRtDIqkD4IxSA6oo7hJSfQkW7pMx1LlrlmANXxJKfl8WxI97JarwFIVUAJBV6XRRfF4CdCib2/G7PUVltC4KgLiEH88pgLGvIH7Bqnv9ZUJvEg3AeaV2rpTMh2Ed7kfnYTChZeCJbXRmJmHlv5fNG092SXnRE5EYJEokAItFtWdRmI+gEB6AtcvFQI+RsQArWMbH93SHML5bKMizkTHiMeNEARCdikOqYn4DjfP7WO16lDmVyazqWKlnZMb4Njot7yZFyEQA0OrNmua3hJBfBPAySVFuFHwCiBWMjP9EGsajSeg9xxqAAFt+umh+E0r9Gu47oijQpOYJnS1CZ0/0FYzHcF+KqxyxBeBsWd1umuopKPFAXJWXBL4AvlOGIR/qycnn4shv7ABYKql9ZaX+EYPGfxRHhSWWJyl/mpPyK/m8PBMnGYy4MANLl5kuqW8AfG+2wKehVPBBU7fUMXWtIQdPJGNhAReUGl4uqR9CMbd5kqKVyJUGUC2/2JaX93RKOeYqoYbIkQNwuqw+KyrqBxjL2qFBvhbJBhrAGOolkZH39uXk8w2ihPI4sirYqnIXKn8rTPWrFvhCKesNmVg6h+6nUQZRVsmRWMCFBbVrSaofoa33Bxu00voRjQak/HW7knd3dsrzYTMQOgBniop+eD/HF7g9bGFb+TXWAKrkcbQNv9BbkK80jhX8m1CrYMxofM4U6lgLfMEXpF+KLBOWDcvILy036UMD4ExJ3atM9TNUuwU3DLbihqgBlA3LiGUVVq6hAHCqqB5GtfsM/rNhCdbKx5sGWEYsK5aZNwruUmltA0IQOVMyvwO3+K+5Y6sVOw4awHKAJ3rzxtfRNsSKBj1BGwAt8BXNfwHn9+thvUU1DA0AIE/3FowHdYFQWxVsWb4W+MLAiNY8YEAeYFnqykSLBbTaD8r8B11Mt+hGoAFp/EV/QT4ZdM6BA9Dq7a52OAKnHbTwLXrONcAqGP/39eblD5yn2jpmoCDhGBK78exJbZ11K0bSNAAArkhD3gFP618GxXtgAOQMBwcyW+N8QRVNTOlIWTSEPBrUjEkgAOTc7rJQ/9ua4YgpaAJmi9N2bUJ+NIi5Y9+9YFS3GToWtMAXcCnHmBzL2irzABxbfQNwpojVai2vlhjDRRNrKHOr7H2S91UFW86k9OdTyjeQfcqhJblSplhZLgvTRAMD0zluAhrswjDaRLYth2XMqVQP5JKmMOQf+nFq9QxAy42+aLX7UunJbFZWxNLSvBvMNYzb3t4ljEw6BwboWd1WQHvQo3u/p0+T7T5rDUda3ehh7ZaXg9sv0qLl0oI2RHPMXqA9uGNtPY+nhU6eADhTFlwoflvMdBEYOyuVJddVbrPMWX2TZloDsUBMeJHPdRW8tm6XSydT69e3tLhgtfu8KLRRGiPTJtrbOxu9Tv5zjA9i3fGH3a47dm0Bsbb0qTSDj0hQCturBByUGTzNgFn0Rw4GycKGSyquAMjtMlA6d7jMI3HR2fsNOuigGTSPvukBGxZGXBByDEDU83nu1eKCdiKjmhotlU7acVH22n4+eaf8OAYgd6kCCA84JZzUeDqqX1sXOmnbeUR9JUaIFad8OOqErO7Pp94A8VTuvVytrJWVsjX4XP0sqHsOSmez6d/QFQPUi/CaudHJ/oSOLKDC5pBXA/jQvhUVDEDrChbtlI4HVusMWOkgZqqfNbrf0gLC+h2Cj9/bIOppoLFRxnF6XsEYnbmyLCqYcgsjZDBFZ2TbRCaT3goFVrACK3jdVtsFb2kBuSdzGsEHmVDVlsRiaVosLxVDAx8BTqAzT+ZNHtLYQyZmrP28t/iim1pA7kaPOYGTIJaaDcEtB4OVRVHBf5xCJtuB9mFHqhwXYAWX24U82Gz3/qYWkEchpAV8bHqtLMHilWdjBz5+CPwgyBt5TEszkdghhpp96A0t4OohMOo0iCS+28YqbwVVHmRppovYvIPlENn2gmBbMekBspSzebm/0WE6DS0gTyCKG/gIIFftJcRfWloQy5jbTQr4CDjySp7JO344xiB1Ezc5wU/OOs2qgRR1LSAStWGR0RiKOxbHX7F6WsG/DT4ybWTbrV6kYdT3s+PcKwvQTtNA/tg/pjMrnRikUX8QwjRXMHTEXjxa62vSMA3HGzPQURwCfAYnsYhpmG3CWn7qAnBqQf2xEOZ/1kaO4vcyeonNOgxUNhXNIQ3b85gFwl5mmkIbq+S1YRt+VJSxQtA1mbdmx6atzfGsmGZ1GX/S3yn/qzaTuuaDp066sPy1NAP7vark5r1VFgDd5vlvwErQUrBg0hb4QZnZFUHL7nROmR8udWIDN0qdrJ1kugmAmyygdd5uCdVvxNNurE6WyjOxaNNkDEO0ZbMoSFRtmQwK1cBSCFQs+Gdgu8vkv4mPoVKBdTLF8gqqRvyOOpDH9lyv2FTQITMGPpZkXg7Xnne8yQLysGe0/SJvPFRg0ViwUYX2tqzItbeL9jYsLALovASCcWl5WZSXlnDVN8XXjDfqkLrkPHSUwTJoRXkXePinaj42fRjwZHgJkW+pjhT2PatVjomFHWjVCrmcyOc6MATScIDAE1u0hqXyoiiWscougg+rI9ez3kb2JEAAiWAFX8LZdbdWk9oAQHq9mBXzRHWEKO65Go2r0sIKBF5nPg/wcSZig0oCZ4EWqQggLpRKoQKRq/K4Oi/qYGSMI9VeMhs+c+jmzqgZNCvLoYKPoNvW1wsAcv2uXvBRt8yDeTFP5h1W4AdN3UYdajG2AYBodH06SgbZ4uOwSxiBVm+gp1v0dHZanYow8qzOgx0Z5k0eyEsYgbqNrlW9JmENxtYlR9XQgYPspgDCyAaOdDqDVhcwOxX93V3o1XrrXFTTCuK+gs7K1Ny81YMOgl4zGpE7xeLs4r687EdNYI2vrVvA+bK4JUrw2eN5zZQXxDv2bAd7e2IDPsrED4E8kTfdgeOlzQavdedPjFlYW8toHYArpnlUe+ZNMgij6mXbq7cL01ohVXlNxN30ijyRN/KoO4Sh62YyVGNtHYAolcgAyJF93Q1kNvi7C4VYgs8uLIKQPOrunFgdPY2r/2x5Gl6rsGYBEO2/TjQGP9EwgeYX3H1KZ+CgMgs2yPDLE7Niz+PHxd5vHxe/OjEXJGmLV/KsM+jWeTPeiTVijnEsAM4sik/hQXTOZxq7ZhxQ7uvqCtzyPfjvZ8W5mSVxdnpJPPgf7zfTt+t3tITkOejB8A2MaNT5hnzq/CDWiDm+sgCIvvlNdeKF9khq6o2yIPs5zBHwrAYVQ/DZgSAMOpBn8k4ZdARdOnfM6xrmLABK0xxxnFBDxHJpSSwuBl+IPZ0Fz/O4GsR0TZLDRZQh6EBdU+dRBhtzFgBxAESkAJycnBCjJ07C6TS4DXzovZLvCG+mQVdhUgbKElSgjqlr6jzKYGPOroIjBSDHpYqYG339+FtioRjMTIgOyxFVgQUlC3VLHVPXkY4FUpFKWJgzZpXaBvergaiUy3w7u7qt7Fk1HH9zVIxPTvpihwO6QVoNX8wEkJiy+B2kpk6pW7upY+s8APY8kSDmiD1DlFaR6IlKQIkGBwZFDm5QDHTqPHnyjDh95iy+Um9dtTAGcwMS3TEZrzJRh9QldUrdMlDX1HnkAdgzKjJ6ALKnd+MNvwenySttnQsXx8Xxt07AkdNdY7kd1iJN1s8GCWWibG4CdUcdUpd2oI6pa129azsfJ1diz5Aq2h6wzWgnPEM+ftPNogvjX3aYn18QH3xwwf7p6JpLQcejkaBuZaPuqEM7ULfUMXUdh0DsAYAiNscssGq46WMfF0M7h9f1k3c5N5rr0D+hv85cyDduZavWHXVK3dpNnZBZr5sdsWegO7zaA6gbJfyHHIC97roPicOHj1jVRAGeyk4Dp6/C8q1zylOQ8Sibmyk66o5VLXVJneoYkPcjH7GXRXc4VgC0Bbpm127Rjd6xYTh3zecCorQHyuh0gVMBg9gf++hNoqenN55qAfZw8mY8AUiNdXf3uJrJaMeee2kPbmTkTAp1GNsA7BnopV9p9ceNU5fDMNlsPDycdarRtYwudaiT91raxB6bFbGsgskslnrX8tzwt2HgcEAIk/ZAGSmr0+BGh05pBhWP2DPi2ga0hHTx9WYbbN4TlLLiRMeVrC50GLqMcW8DLmPfZqcB+xE7jZr4eG5kdaPD0BVjWcDQc3WeIfdYcRqwU4vTqImP50ZWNzqMQjGsgoP1Jw9QCje7I8RhailA0ZuSciOrGx02zVTHS2AvC8MxBxDGYGZ6s4Tc3Mdprw/eFZsJaHxSwBjl4PDe9U0gD/ybt8yGMSv22CeFuO0a5+ndyEodxjYAexyGia0FrKw4r4K9es54LZzBoSvg80qD6cYwVfvNl9xRcCOrGx2648J/bGKPA9GxBSB2PHYsJQ7TcRw3iIiZADs9bluvbmR1o8Mg9OKKBi0gJoRjC8AMhlacuuljsbMr2f1G/rMb0EMPYLMfVsGP3+qOG6eyrmCTTOowroHYs9uAseQxC/+3YnEWc5lbj5XT2ZJVk5sGuh+hv3pzQXz1Zj8UvKWljLZj6VYUinDBz+VjPRVHC6jmtxIkqvdZzO1y/YLTEOsGt1MhtojnRkbqjjqMbVAKnRApLsWVQVrAUqnsmD2nXiKOCcYwohsZqTvqMLZBinEA0BiNK4PZrCGuueaKc+pWfHI/5rQHNzJSd9RhXAOxZ2SUiCUAK5VFsbQ4b20S7lSBLBw3QxRO6cYlHmVzA0DLdxA6pC7jGIg9Q+TjB8Dl5SIOmnHe9rOVy4EY7kif1kDZvAw2UZfUaewCsGf0SDmBucXLcWCOi6UXF+d8HTRT0rDFRxx0Qx78yMbDe6jbyBekrymTmCP2VhsIMnoriCPeVxXkc986VlFueopxAddWfFAmN9VvPXo8ZckCYchjpvV4wQSI1fSzAIihmMjbgTyaAZ9nXV7dPuQRCGkLgcnEdiR1HXGwMWcBUBnR9oR5nm+QVQOrqjRZQcrip/qtxRp1TZ1HGWzM2VXwq5Eyo8FjY24hho1uj0rWIYvSoHNX4klhYc4CYG+H+A2msKL7JNzOxjuQdHHtjDYHUWMdhT1fyhJ40KBzpzwSa8Qc46+2AaVcQOvrFacEgo4npZ7R+llsSxF3j+BmuuT5IZRBR9Clcye8EmsAoSXYahXMVEodc5JYR5yp6WkxPRP84YQ8FHBqjkMPwXRudMjeiCZ55uE1Og42pK6p88hCFdbWAZg1jMgAuDA/52s7tmaKZAN+BlYkSSAkr+RZR0eKtE+fOSeo86hCNdbWAdiVEy/DlymS8QspDVHGCZJjFy5q0QnbUQsunBq0MOGCKHnVNaNDHZdxZCx1HkkAxiysrWW+zgXq5EW0S38bBVODg9usbLmd2OKShgY3qM9jbJBn9cY9kEfyqiNQt/Z2d7bOdeTTjCYxRqzZcdYBaD2Q8gX7RZhX7lc3gB07eajz+++f05b1LIZmZhfiWR2zaiRv5FFXoG6pY+o6sj0CazC2AYDYKuFZXcJvRffwodXt2CYvT4mZ2eA7JHb+PCyaHROnXsV2Op1X8kKeyJuuQJ1St7A+4vChw7qy2ZJuLcY2AJAnWYNBl2u0tszTUYQ89rLbs2efFZeNZJ2dBjp1TqInqKOR70jYqkjkgby4cTStSu7o1u54MDJ1nM8Hf/aIE0aIrerT0plmAwAtIkp+3wkxHXH27dsvuA0tPXnHLuh11GZVNDE9I+axbkIn2BvpiXkyb/JAXnQG6pI6pW6p48hCHWxtAqAsiB8DqZE41fFstIMHV6uHc+cvwCroZ4MNfoKgjPnjMIDIPJiXBX5NnY1qgFGH1CUDdav1/LnqjGvuiSliq+bxZgvYKy3fwOdqI4b1e/v2HaK/fwDHt1bEmTMfuMp2Ho14L2eM0AJNz89boGA7TMfgL2mSNoHHvLxYPcq2ABndBDZnqEvqlLqNMDy3hq0NLNSdA1OWqVR/uiFmiD/YIfnv/3nFajR3XegUw0ONFcehhUkUzPjE5fUFTNPTs+LggX2u90QmKNgTncN/BzY75+EwdGv3uu8gQUcfPms+lxbWow7ZSTl56gzknLIocPPxbdsGxLbBQdHR3taQKqvey5en1zoeRxrGC+PFKqY251R3ShrVRNtMUY1hD5LBzUnCefLeeyfF+2fPWJnt2L4Ni5OGoOzVHfA5R3oZU0nj45fF7Gz9Ef1O7I985PDBpgXkVBKe0dGG3Ve55W2G/2gqcIcqVCsWCVar/COAyRs7Fss4k20ZC8P9Bn5gJ945CctXf3iGa6a3bx8QA319Fm/Mb3W877y4ND5pZb8XHY9rrz3olxXP6aGpyd6CHIa+Ng3y1gUgc5ouVr4DvT7iOVefCVmQv/vdy1DmlaGJNlojbIlhHze1VRZt2DV///49YrC/f6uosXw/OTUlTp8+i/UczoBMq21ii5LlKu+ZjvYOcfPNt6yDMwpB8Z1+t6+Q+Xq9vBsCcF6pnSsldRpf9+oZWvVSa352afyiePPN445z6cGG3IVCJ04GGtuQpr+/TxzYvxvVaTLOEGHH4dTpc2JqaqPDAM/6KBYxWD3nfJz0+g/fEGnbD1avnM3L/V1S1p1nrdsGZOkxwVSx8jRu/3xDaYb4Y8f2nWJ296w4d+5sw1w5tLADBTO0cwjgWx3fGhgYEG+PvrU+2MyCZFW9d/cusWPHtvWqsyHRiF6wKr90aUK8f+68VZXbbFhnp4x8CLzvtB4Vi0Vx8eIF/I+hR32lhrDj29fdu/dECj7ygabJ013SqAs+vm9oAfmyWFR70HQ+yTYhf0cVxsbOo0d8GspenctlW2zbth1iaGhI9PXVr17nMbPwxvHXNhUQq6lrhodQMIOxASKBN4722gdjmAtHZ6U68AO74fqPiK7u+vvjTE9PiQsXLoiJiUvrA+ur430HxPDwrmpSod+zzdcu5MFCQTa0IE0BSI6nFypPo/d2f+jc18lwCV4t7BE6PW5q2WrA4/hXFE5tYO9x164h9CQHImsfsZ07MXlZfHD+IhYKbQQe+d2Oj+zI4RHR1qSnWy0XvVxoLdvXOmvV76K4B7i+19eZeaBZ3lsCcKasDmE/urfxlWaaEYrzu4nJcfHOiRMbOjQ2vyyw/r5eC4h9fT3arSKtHYeJCLwpjAnWm5Nmx+HwkSPgabvNZuKusH4VbKZ+Habe3m3G/JYAZGL0iH8Ivd3djFDc33GfwVOnTorzYx80nPHgdsBHDh3EdnB6zu5hO/TEu+813PMQhSZ2DV8jDhw46Hhr4rjqHaL8CD3fe7bizxEAYQUPwwq+jq+3YyuCcX/PauoMxhcvoF1Ja1Qbdu8eFrt3Ddc+DuT3ufNj6FBt7KGTMIE3hPbaPozXOW1eBMKQJiKQZxHW78Zax4N62TXsBVdHJqGphcoTePbX1c+TeM8CHkG7at/e/eLs+2esnmS1V4yb7eDcyl9Lm52pnejB7927DzMvif+219WBD/uJvpzxzvqDJjeOLCDTg2h+pqSO43qgCb3EvWIbjG3ESxcvYupvEq5KOfGRGz6kRY7XXn9LlGCBB+EQumPnTquNF7cjVP0KDut3qjcvr8fVkVu3IwtIpkhwtqweqlTUz/0yGaf0BADHG/m/ghmH42+9ro29DutA7t8XWczQpDVgpuohp+CjDja5YzVTTE9OPgck/rRZnCS/IzB6e/qsRTtBy8G2J2mnGXzEhoURF8pzBUDSzUn5FWRUf2bcRcZxjcrZlCKcN4MOpGnP1ARNOxb0gAkLGy6ZcQ3AfF6egYn9G5f5JCZ6AQukZmeD3z2KNEk7rYGYIDbcyucagMygNyeeQIYvus0sCfEL+U743V0OdEsPbg9CmqSdxkAsEBNeZPMEQGRYacvLe+DntXmOywsXMUpDd68svGZOvPOe5drklzWONZIWabo5aNpvvmGlJwYsLAATXvL0BEBm1CnlmMjIewFGvStqvEjlMw3XzHIZ42tvvGl5ZXtZm8I0XAb5f6+/adGKbB2uT100S26VPTBgYaFZxCbvfI0H9OXk83BWeBz0/6pJHol71Qfv4omJcWu7kHfePRUI/6SZuqDU4xhwft6PXJ4toJ1pb8F4FL3iX9u/03DduWMo0LlYzjGTZqoCytwqe59C+QYg24PtSt6NtsC4T15ik5yu/9d/+MZA2mzQj0WLNNMSWNZWmXts91XrwfFUXHWievdYxPQJHBd4DHN2q27J9SIl7FkJ63ZPnXpPzMxM13XlaiYOXap6e7EU4MC1mN7LN4uarHcY78OSrKNYZPRKEIwHBkAyA6+Zz8Fr5mfo+flqWwYhWItG8BqANV+Bl8sdcE75ZVDUfVfB1YyQMTD5Zfxv9nOqjti6T5wGWKYs2yDBRyUECkAShCfED3Bq71d53wrp0QDLlGUbtESBA5AM9hfkk2h7exoZD1rAFj3/GmBZskz9U9pMIdA2YDV5tAPlTNH8Z9TFD1Q/b90nSwMAyNMYbnlQV7NKiwWkisnwKuMtS5gsyF3hlpZPJ/gsnFzJTt/dVFE9LIX6e1pFfbm0KAelARoPtvl0VbvVfIYGCLjz3wsA/iv+W0M01SUQs3uAbwX/X9bR4agnamgAZOYcJ8TmOc+mabC6nlIT+4yDzIa8M+ihlmb6CBWAZIQzJrCCP8eeIclddd1Mowl9x+k1WL4vBDXD4VQN2johjRiggG1CfjRtDgyN5E3EczgWsEzCBh91EzoAmWlnpzzfl5dHYX7/Dl9d6vwJKWMSAnXPMmBZsEyi4Dn0KrhWyOmy+qyoKMyeqMb78NYmav32rQFUuZfoUEyfTt/EfBCIHIDkfUGp4eWSwv4z6jYfsrSSOtQALN+LdKP348nsMKsto0VSBddyRUWg2/8ZaRh/meYln7Vyh/4bvVzqmLqOA/gofywsYHVBlEpqX1mppzBUc0f189a9Tw1I+TOs233Iy9JJnzk3TR47ANrcYhuQ2zFm+BSq5QP2s9bVvQZQ3Z7idhludyxwn5O3FLEFIMUB+PLTRfObUOIjuE/GDuPeyiHwVNDZInT2RF/BeAz3jjYKCpwJBwRjDUCb/9X9Cc1vocXwRSg1sTu12vLovAJsWJ+rfoK23qOY0XC0RZpOfrainQgA2kIAiIdUxfwGOir3AYjpWeVjC+jjCuAto8p4RmaMbwN4TbfF9ZFN4EkTBUBbeu7ejxPdHsFY1gMAYmTnmNj8RHkF8Mo8CqFDGN9ttht9lDw2yzuRALQFWj1Mx3xYKHk/CiGyY8VsfsK84uObFFJ9L5s3nmx0CEyY/HjNK9EAtIVmdTxdFJ+HG9uX8Ox2/E5lhwXWjmc5PMeD//oK4hdWtWsrIaHXVACwWvczSg2oorgL1oHtxFuq3yX1HkB7GVb+GZ63W+/I06TKRb5TB8DqwrB6z0rcicb5p7E25VZck7FCHMMmKJjforP1Atzin01Cb7Za727uUw3AakXAGnbMl8UtK6Z5FAVLTxz6JcaiJ82qFB/IK/hAjmUN41hXTryMZ40PgasWLOH3Vw0Aa8sJ4OucWRSfwml6N0nTHMGq6xHcj6AzM1AbN8jf6DxcRr0zilUXo8owRnH/am+H+A0A5+4o9CCZipDWVQvARjqfVWqbKImRihQjUpn4FzsAzm6Asxtg6cZqHXQ6cb/226KjxBzezeHdHN7N4531GyCbwzKsS0oaoxklRkVejPZIOdEo76vx+f8DYi06xjCLKmEAAAAASUVORK5CYII="},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAF4VJREFUeAHtXXuMJMV9/lXP7s7O3mPvbg/IHSA46/BCsCwbyealOKfDJH4cWIkQKA4gWRArkSIskYAxsWNZtokDDlL4J0qCZQkjLBBShH0ODjanCxGYyx/4BcSrO+4hjjv29vZ25+52Zmdnpivf17MzOzM7j+6Zrp6e2Spp1N3VVV/96qtv6tXV1Uqsq2HgrNZbJSuTRSWTSruTouUCUWoDjhu0Eu+olo/CI52Wczg/p5ePavkoWtN/RitnKqFlSlIytVGp0zUJrvELtVbzr7Vel87JjRDPNcp1J7VSFNukFr3FJCdK1BmIckppPaUdZwrnb4wn5VWl1ILJdOOKvWYECMElzy/KdQXX3Y0abTcyfi38huNQMBBfXoscQI25b8hx9q0fldfhl4uDbaZtGGgBphf1FWgWb0PB3oQCvgHHlGlCQ8FXKouCeQ1/lJfR3D8/PqoOhoIbQ5CBE2Ba6y06I3eI0nehhrs+hpwHNgm14S9Eqx+oMXl2XKEJHyA3EAJkUzqfkc8qiA5lswfXIwNURpWsQIhLuNirIcZNY/ITNt2Vm3160tcCPK/1RYWsez9qh3sweJjo0zLoyGwMZmZRy39vKOU8vl6p6Y5AYhCpLwWYyehLc+I+iEK4F7XdaAx47JkJqAUX8ed7MinOo2Nj6t2eGdJhwn0lQAwqduqi+xA653ez2e0wzwMZzWuOtX5KJZzvYNByqF8y2RcC9EazrvsNEXU7hJfoF3J7YSeEWMTM+HPKcb7eD6PnWAsQYkvNZ9yHQeoDOE/2okD7NU1wlgNnj20acx7BeTau+YitAM8u6j2uq58AiTviSl4/2AXxHXEcdd/GUbU3jvbGToDZrL5sUet/xqTx5+JIWN/apNQLo0p9KZVSx+KUBycuxqCmS8xn9UMQ39tWfAZKBX9ockuOybWBFDqCjEUNuKD1tnxWPwNidnWUCxspEANolvcPp9Tn1yl1MlBEA4F7LsD5RX2zFPXTmMu60ED+LGQTBjCHekoS6s5No+pnTYJE4t2zJthrcheK3xJX/9SKL5KyrknE4xzcz6MMetkk96QGXFjQ25eU/iH6ep+oYcVe9IYBpV4Z0erP1q1TJ6I2IHIBpjOa6/B+jH/gBVFn1qbXnAE0yTPoG94yPqYONA8V/p1Im2A80fi0K3qfFV/4BdktIsuEZcMy6hYrSPzIBJjO6ju1q3+EZncsiIE2bIQMoGxYRiyrqFKNRIBzGX0/mt2n8BuKKmM2nc4YYBmxrFhmnSEEi2W0D4iMqHTW/Ucsi38gmFk2dBwYwOsAj42nnC+jb4g3Gsw4YwL0xJdx/x2W32PGdIsaBQMQyJPjY84XTYnQWBPs1XxWfFFoxGgaqEDuZVmaSsRIDej1H7T7T6aMtrg9YEA5f7N5TD0edsqhC9Ab7ZYGHKFjh515i+efATbB+N09nlJP+4/VPmSoIuEcEofxHEm1T9qG6DcGIMCCctStWGn9Yli2hyZAPuHgRKad5wuraGKKo1TGEbU7rCcmoQiQz3bzon9ln3DEVDQhm8XHdsOiPhLGs+OuR8FobhNcWGDFF3IpxxiOZe2VeQgLW7sWYDqDt9XsqpYYy8WQaShzr+y7hO+qCfYWk3I9n9ZdC7nLfNjoPWAAgxJXHPWpbha1dixAbxl9xuv32ZXMPSj8uCTJldXDY+gPdri8vyMBst+H+b6f47grKiLOnCvI1InSlnmT25OyZUNvZ3riZk9U5dAoHdSE+zE/+Ekc8VJ8MNdR05leFL4ovitYUt2FpvhyBe39ykLsDrG72HGzp7vcdBebWqAmOkEJXI0sv7f7tU4S6yYOxVd21edlv6iP1TZUn0dpBwpeiu6SuMWCaBeVj3ZLySvM1DkJcRJDknBGsJVORw1doKzAlq9BGz8M+t5x4BoQ75Y+YSebA5VN6IExDSL5fFZyi2kpLGUhQMzCQnz8i3o/nNOP9xiGYRnHqMNiVk8bARMJJEBul4Gc3howDRs8RAaKbl6WsmkpFvxvIc2wXhzENeqgDU8jARLxLUBUsSnu1RIA2wYNmYEChJTPLXRUl7H+Y1ximHTL+/mk/KbhW4DcpQoi3OEX2IYLlwHWfAU0pd06YhDLlKNGqBW/+L4EyP350JF90C+oDRcuA+y/FVB7heWIZbJPCK08QM34sdeXADU2h4SyB3Ljbz8k9TpMIb/YUbPbzG42x8Q05aCVJDXjB7+tAKHkndyZ1A+YDRM+AyjMQAMOvxZwYEJsc07dXtJO6xTaCpB7MsPQ2Gzn1To7g3eX83ymnElsasbbz7uN8S0FyN3ouSF4Gwx72yADnGQ25UxiezZDO56GWmSgpQD5KQQo2e5G34JA07e8JxyGEjGJTZOpHWqolflNBciPwGClw72tItt75hngEw5TziR22WZqiFoqX9cfmwqQXyCCgtf0R2DqyerFNcrAWLImsctGU0Pe16zKHnXHhgJEpGF+/qourL3sAQP5vLk+oEnsGqr4KbUmXbmGAuSH/zBRuaa+vVZDWIwuFnPmRsEmsasppJaoqWq/8nlDAS5/dbIcxh57yMDc/Lyx1E1i1xvdTFOrBMjv7SLynnoAe90bBubnzhpL2CR2A6P3LGur5tYqAfJjz2iv7WO3Gpp6eIHFpKdmZkM3wMOMYKFq2XBqyvuQeNlj+bhKgPgGrZ14riOpl5epVEqOv3dCisXAr1s0NZtYxCR2pK70QfGaJGsEyBUMUOp1NSHsRU8ZmJiYkKWlvBw6fDQ0O4hFTGJH6aCt6+tXydQIEFNOt0VpkE2rPQNbJ0ofE5ibS8vRY8fbR2gTghjEoitjt4kS6u16jdUIEM9Obgo1NQvWNQPJZFK2bdvu4bw/fUqmDr7TUXPMZpdxiUFHTGJH7uo0VhEgqsck5txviNwgm2BbBi6//AMylCgtSGLt9evfvh1oYMIBB+OUaz5iEbMXjhqj1sppV17LPL8o16EGjLhXWjbDHlsxkBwZkSuvulrefPM3XjD23w4fOYaBxEnZvHlcNm8al9HkiIwMl9aNLOXzwknmufm0J7qlpdrJbGIRsycOGju/qDjO+G+mXxFgwXV398Qgm6gvBrZObJWdO6+QQ4cOVsJTWNPTM96v4tnmhBjE6qVb1ponwEoTjHV/VoC9LBUfaV9y8aXyoQ99uNIc+4hSCcJml3GJ0XNXpTVPgGiT1ymRa3tumDWgLQOsvT728esrA5O2ERCAAw7G6XXNV7aVWqPmeO01wemc3AgPu/C0zFDMj+y/TX7wSrn8sh1yenZGZmdn5Uwab82VX7d0hmXL+Dpvno9TLT0Z7bbgkFpL59SNCPJSqQ+o5ZoW4e2tmDJAYV28/RLvt/+t8zVWfvjq9TXXsbsoae4lrwlWrjsZOwOtQQPNQFlzXg2ID0BMYgpmoDMcRuamsTHBfnzS+X9OKjl0Zr3M59Gbgds0rOX5OSV/sE3LLswZX2Qns9rS7WkOocpNsK0BW1A2g3e4/+UtJS8cQTdLl0SHd6UrMaZzSqZPirwKYT76Sy2f2yHyV1drucC+0FDhaNWJFk9zzlmtt2LFKtcAWteAAdZ4f/Kikv84rKrE1yDgshcFyrCMw7jWNWaAmqP2HMmWlNg42Nr2feaQyP2vKlkorNR2fhlhHMYlhnVNGID2nKKyAmxED2uv7/5SYU+W4OIr4zEuMWxNWGak9kjtOUrbEXAtLSLs8331QHfiK2NShMQipnW1DFB7EKDYzyzU8uINODppdutgKpfE4iDGuloGqD0Hw+ENtd5r+4pTLRzthu2ISWzrVhig9hx0cqwAVzjx+msrUy1VN7o8JabtC9aRCO1hP38rwGpaOMlsypnENmWzUVxoz8EDkJg/NDRKwSrw47WPVFfd78bDJHY3dvUqLrXn4NVQ2wRXlcB0puoi5FOT2CGbGgkctWf7gHVUFw0+EzeJXZeN/ri0fcDV5aRcc7tRmcRenZM+8PFqwD6wM0oT80vmPuRiEjtKjsJMi03wuTAB+x3r3NnSS9sm8mES24S9xjGhPU7DWAFWMZ1b4G5UJtZG4lOzHnZVYmv9FNrjNIwVYJUQLsRi0vPz4e9GRUxiW7fCALVna8AVPryzHZuTMj9zsvT93bp7nV5yN3piEtu6KgZYA+KBsK0Bqzj5oys24IuSBZl57yi/M1B1p8NTYBCLmMS2boUBas/WgCt8eGefuXJcHDyNy5w/K2dOvdedCCE+YhCLmMS2roqBUg2oDT58qkqsT04v3jAsf/7RCc/as2dm5NTxwx01x2x2GZcYdMQktnVVDGiNQQh2gK3ysqdg4Cu7fk/Wj3hvrHq113vvvI2ByWnc8dMkay8s47DmoyMWMa2rYwDrdIe0cqbwF6+7s7Yvt60fkn/908vkzmePeN1A9t9On3wXA4n3ZWzjuKTWb5Th4aQkhko1WrGQl3w+J1kILoN5xAKuy47bMBOLmNbVMkDtDSW0TIW3+3BtAv189ZkPbpRH/ni7PPxfJypjEQrr7JnT3s9P3ig+YhDLutUMUHuOpGRq9S3rQwb+8uMXyNN37Kg0x0FYYbPLuMSwrgkD0J6zUanT+KDcmSZB1rw3a6///eur5K5rJryRbDtCONplWMaxNV9ztqg5aq/UMVGoBbVc3zz42r7D/tsTey6RL//hRfKfv0vLSwfPydt4weNMttR52ZJKyO9jPw7O83GqxY52feiFmoPzBKi0nsL4zgqwDW8U1l98bKv3q9+Nalfcd6Nqk7eob1NzTNOba9AORsLWWQYiZKCsudJkl5I3IkzbJmUZ4N5OnuY8AY4n5VWl1MrklSXIMmCQAWqNmmMSngDhsYA+4AGDaVpoy0CFAWqNmqNHqQnmmdb7eLDOMmCcgSqtVZ4PDTnOPny/4e+NJx4gAWxmLUV3SdxiQT56aVGGMXVOl8e2SktLC+IkhiThjOALE5h8s65vGKDWysZWBLh+VF6fz6osasKer9vF5oVSyC9KsZAr2ynJqoUkSUdDlHnvV8AGh4mhpAwNj6Jfa4VYISyuJ0plqbWyeZUmGLUINpqV18o3enUs4lMDS9l0jfja2UKhenHKnyloF8He7xkD1Bi1VjagIkDPQ6mXyzd6cSxASPncgq9FT/X2sXFmXGJYF2MG6jRWI0B0pZ7vlems+Qr57vcvIwaxrIsnA/UaqxHg+Kg6iOrxF1Gb7vX5UHuF5QpeLVoasISFaXG6Z4DaosaqkWoE6N3Q6gfVAaI454AjTLkQi5jWxYyBBtpaJUA1Js9CqbUfmDWYD2+qxUC/jQMTYlsXDwaoKWqr3ppVAhxX3trAvfUBTV1zns+UM4ltyuYBxt27rK2aLK4SIO/qBlVlTawQLzjJbMqZxDZl86DiNtNUQwFuGpOfYFI3/P0pGrDL1xdNOZPYpmweRFxqiZpqlLeGAkR7nRelv9coQth+2uAbeSaxw+ZhoPGgJU9TDTLZUIAMN5RyHkck40NJkwMFk9gNuLReDRighqilBrc8r6YCXK/UNObnnmwWMSz/fN5cH9Akdlj5H3QcaohaapbPpgJkhKQ4jzarOpsBBvVfzJkbBZvEDprPtRie2qGGWuW9pQDHxtS7GBI/1Qqg23tz8/PdQjSNbxK7aaL2xgoD0I6noRWfVWctBcjQKuF8B0o2NlSdnyvtn7LKshA8TGKHYN5AQ1Az1E67TLYVIJ7dHcLM4HPtgDq+j6fTp2bCn/HxMO1C1Y6LpfuI+rmSdlojtRUgoyvH+ToUbWSdUyqVkuPvnZBiMbxKlljEJLZ10TNArVAzflL2JUCuYMCUxmN+AIOGmZiYwPL6vBw6fDRo1KbhiUVMYlsXPQPUSv2ql2ZW+BIgI28acx6Bso80A+rUf+tEafOeubm0HD12vFOYSjxiEIuujF25aU+MM0CNUCt+E/ItQABnHUfd5xfYb7hkMinbtm33gr8/fUqmDr7TUXPMZpdxiUFHTGJbFy0D1Ai14jdV3wIk4MZRtRevoL3gF9xvuMsv/4AMJRJecNZev/7t24EGJhxwME655iMWMa2LmAFow9NIgGQrb8X5jTOq1JfwfO5mzA+O+Y3TLlxyZESuvOpqefPN33hB2X87fOQYBhInZfPmcdm8aVxGkyMyMlx6NW4pnxdOMs/Npz3RLS3VTmYTi5jWRciAUhlqI2iKgQWYSqlj81n9TXQ0/yFoYq3Cb53YKjt3XiGHDq2s2KawpqdnvF+ruNX3iEEs0y45pCRXKC145XmvXa/tQbP7TWojKA8dMQfxJdJZ/XMcdwVNsF3407On5Xf/95YUAk7LsNllzReF+JiHM+cKMnWiNDM1uT0pWzYE/i+3oyLQ/V7aA/HtH0+pT+IYeC6tIwGSmQWtt+Uz+ld42HxhIKZ8BM6h5jt69LCcPHnCR+jSgIN9Ptvs+qIr1EBY63dqeEx9ZJ1SJzsB7liATGx+Ud8srv4pasJAgxm/huZyOTk9OyOzs7OSzWYxt1eqcUZGkt4kM+f5ONViR7t+GQ03HGo8F/sWf2rTqPpZp8hdCZCJzi8Uv4We0N91aoCN178MQDzf3rQu8dVuctC1ANkfxKBkH0bFn+jGEBu3zxhQ6pVNKbW7k35fdU67FiDBFhb09rx4/cHSY43qFOz5wDGAft/MsKDft07566S3YCCUvhsNwT/hFkxSZ1qkZW8NAgMoY5Z1GOIjHaEIkEDjY+oAHsPcBuPMrbFnQtb1jAGWLcuYZR2WEaEJkAZhBcSLMPIL+JVmaMOy0uL0nAGWKcuWZRymMaEKkIZhQvJpLepvwzTSYvWeAZYpyzZsS0IXIA3cPKbwSqcYWT8YNgEWrz0DLEuWafuQwUOEMgpulCymZ1Q64/4b2uJ7G923fv3BAATy5PiY80VT3SojNSCppcElw21N2B9SW20laz6T4vN0sjrZ8H3mMvp+Jfq7rBXDR7eIYTPAyoN9PlPNbrW9kQkCq2fuhAC/j19vl41U596er2IA4ivg9wUTA45VicEjMgEy8fSi/rTr6ufDXMzaKFPWr0MGMMnszfOFPNXSyppIBUhD0hl9LWrBH2MZl31s16pkIr7Hx2uo+W4Jc5LZTxaMDUKaJc4M8jkiRimvNAtj/SNmAGXBMolafMxl5AJkonyO6K2kwHIe/Otc+lkXPQPkHk3gt1kWYT3bDZqLyJvgegO9Ra1Fjacn4a+srk/LXq8wwJXMklB3drOYdAWt87OeC5Cme8v7s/oZ9A13dZ4VG9MvA6j59g+n1Oc7XUbvNx0/4XrSBNcbRiK8l1oc5yt2SVc9OyFecykVOCbXcRAfcxaLGrCa4mxWX7ao9ROYqrm12t+ed8mAUj/Ce7v3dfLqZJcpt4weOwGWrT27qPdgzvAJNMs7yn72GJwBNLdHuF1G0B0LgqfUWYzYCpDZgfhS8xn3YZD4IM7tVgcByhic5cDZY8ubSvneqyVAEqEEjbUAyznEE5QrtOt+Az2G20FqaROZ8k17rGEAwsPL4fo57s/nd4u0GoCIL/pCgGVOIMSduug+hIHK3RBi1TfUyyHW7hHCw3th+iluiwvhYVfb/nB9JcAypZmMvjQn7oOYy7oXQhwt+6/FI4S3yE8hcDf6dhuCx5GfvhRgmcjzWl9UyLr3i1b3oBDW1Hao+PPN8mtW/AhMq+9wlLmK67GvBVgmlc3xfEY+i2Vsd8FvD64HcsCC2o770O3lh/+87/mx2e1zNxACrC6DtNZbdEbuQO3AfuJ11ff69RzCex21/FP83m6jT572a75o98AJsLowvNGzltvQOb8J76bcgGN/bJuPLW5RMK9hsPUylsU/3w+j2Wreg5wPtACriUBtmDy/KNcVXHc3CnY3Ms51ibEYSXMEiz/IAfxB9g05zr71o/I6/EpbgVVnYgDP14wA68sO4luXzsmNouUa5bqTeOt6EueTGMxsqQ8b5jUGD2fQ7kzhrYsp7ThTOH9jPCmvQnALYabTL1hrVoDNCuis1lslK5NFJZNKu/jJhRDnBohzA8SyAW/rYNCJ8+VrD0fLOdw7h3vncO887nnXENk5vIZ1SitnKqFlSlIytVGp083SXov+/w8nKDA07uUpHQAAAABJRU5ErkJggg=="},function(s,a,t){"use strict";function l(s,a){"length"in s||(s=[s]),s=o.call(s);for(;s.length;){var t=s.shift(),l=a(t);if(l)return l;t.childNodes&&t.childNodes.length&&(s=o.call(t.childNodes).concat(s))}}function e(){for(var s={},a=f.length,t=0;t1&&(a=Array.prototype.slice.call(arguments)),s(a))};return"conversion"in s&&(a.conversion=s.conversion),a}function _(s){var a=function(a){if(void 0===a||null===a)return a;arguments.length>1&&(a=Array.prototype.slice.call(arguments));var t=s(a);if("object"==typeof t)for(var l=t.length,e=0;e.04045?Math.pow((a+.055)/1.055,2.4):a/12.92,t=t>.04045?Math.pow((t+.055)/1.055,2.4):t/12.92,l=l>.04045?Math.pow((l+.055)/1.055,2.4):l/12.92,[100*(.4124*a+.3576*t+.1805*l),100*(.2126*a+.7152*t+.0722*l),100*(.0193*a+.1192*t+.9505*l)]},n.rgb.lab=function(s){var a,t,l,e=n.rgb.xyz(s),r=e[0],v=e[1],c=e[2];return r/=95.047,v/=100,c/=108.883,r=r>.008856?Math.pow(r,1/3):7.787*r+16/116,v=v>.008856?Math.pow(v,1/3):7.787*v+16/116,c=c>.008856?Math.pow(c,1/3):7.787*c+16/116,a=116*v-16,t=500*(r-v),l=200*(v-c),[a,t,l]},n.hsl.rgb=function(s){var a,t,l,e,n,r=s[0]/360,v=s[1]/100,c=s[2]/100;if(0===v)return n=255*c,[n,n,n];t=c<.5?c*(1+v):c+v-c*v,a=2*c-t,e=[0,0,0];for(var _=0;_<3;_++)l=r+1/3*-(_-1),l<0&&l++,l>1&&l--,n=6*l<1?a+6*(t-a)*l:2*l<1?t:3*l<2?a+(t-a)*(2/3-l)*6:a,e[_]=255*n;return e},n.hsl.hsv=function(s){var a,t,l=s[0],e=s[1]/100,n=s[2]/100,r=e,v=Math.max(n,.01);return n*=2,e*=n<=1?n:2-n,r*=v<=1?v:2-v,t=(n+e)/2,a=0===n?2*r/(v+r):2*e/(n+e),[l,100*a,100*t]},n.hsv.rgb=function(s){var a=s[0]/60,t=s[1]/100,l=s[2]/100,e=Math.floor(a)%6,n=a-Math.floor(a),r=255*l*(1-t),v=255*l*(1-t*n),c=255*l*(1-t*(1-n));switch(l*=255,e){case 0:return[l,c,r];case 1:return[v,l,r];case 2:return[r,l,c];case 3:return[r,v,l];case 4:return[c,r,l];case 5:return[l,r,v]}},n.hsv.hsl=function(s){var a,t,l,e=s[0],n=s[1]/100,r=s[2]/100,v=Math.max(r,.01);return l=(2-n)*r,a=(2-n)*v,t=n*v,t/=a<=1?a:2-a,t=t||0,l/=2,[e,100*t,100*l]},n.hwb.rgb=function(s){var a,t,l,e,n=s[0]/360,r=s[1]/100,v=s[2]/100,c=r+v;c>1&&(r/=c,v/=c),a=Math.floor(6*n),t=1-v,l=6*n-a,0!=(1&a)&&(l=1-l),e=r+l*(t-r);var _,o,i;switch(a){default:case 6:case 0:_=t,o=e,i=r;break;case 1:_=e,o=t,i=r;break;case 2:_=r,o=t,i=e;break;case 3:_=r,o=e,i=t;break;case 4:_=e,o=r,i=t;break;case 5:_=t,o=r,i=e}return[255*_,255*o,255*i]},n.cmyk.rgb=function(s){var a,t,l,e=s[0]/100,n=s[1]/100,r=s[2]/100,v=s[3]/100;return a=1-Math.min(1,e*(1-v)+v),t=1-Math.min(1,n*(1-v)+v),l=1-Math.min(1,r*(1-v)+v),[255*a,255*t,255*l]},n.xyz.rgb=function(s){var a,t,l,e=s[0]/100,n=s[1]/100,r=s[2]/100;return a=3.2406*e+-1.5372*n+-.4986*r,t=-.9689*e+1.8758*n+.0415*r,l=.0557*e+-.204*n+1.057*r,a=a>.0031308?1.055*Math.pow(a,1/2.4)-.055:12.92*a,t=t>.0031308?1.055*Math.pow(t,1/2.4)-.055:12.92*t,l=l>.0031308?1.055*Math.pow(l,1/2.4)-.055:12.92*l,a=Math.min(Math.max(0,a),1),t=Math.min(Math.max(0,t),1),l=Math.min(Math.max(0,l),1),[255*a,255*t,255*l]},n.xyz.lab=function(s){var a,t,l,e=s[0],n=s[1],r=s[2];return e/=95.047,n/=100,r/=108.883,e=e>.008856?Math.pow(e,1/3):7.787*e+16/116,n=n>.008856?Math.pow(n,1/3):7.787*n+16/116,r=r>.008856?Math.pow(r,1/3):7.787*r+16/116,a=116*n-16,t=500*(e-n),l=200*(n-r),[a,t,l]},n.lab.xyz=function(s){var a,t,l,e=s[0],n=s[1],r=s[2];t=(e+16)/116,a=n/500+t,l=t-r/200;var v=Math.pow(t,3),c=Math.pow(a,3),_=Math.pow(l,3);return t=v>.008856?v:(t-16/116)/7.787,a=c>.008856?c:(a-16/116)/7.787,l=_>.008856?_:(l-16/116)/7.787,a*=95.047,t*=100,l*=108.883,[a,t,l]},n.lab.lch=function(s){var a,t,l,e=s[0],n=s[1],r=s[2];return a=Math.atan2(r,n),t=360*a/2/Math.PI,t<0&&(t+=360),l=Math.sqrt(n*n+r*r),[e,l,t]},n.lch.lab=function(s){var a,t,l,e=s[0],n=s[1];return l=s[2]/360*2*Math.PI,a=n*Math.cos(l),t=n*Math.sin(l),[e,a,t]},n.rgb.ansi16=function(s){var a=s[0],t=s[1],l=s[2],e=1 in arguments?arguments[1]:n.rgb.hsv(s)[2];if(0===(e=Math.round(e/50)))return 30;var r=30+(Math.round(l/255)<<2|Math.round(t/255)<<1|Math.round(a/255));return 2===e&&(r+=60),r},n.hsv.ansi16=function(s){return n.rgb.ansi16(n.hsv.rgb(s),s[2])},n.rgb.ansi256=function(s){var a=s[0],t=s[1],l=s[2];return a===t&&t===l?a<8?16:a>248?231:Math.round((a-8)/247*24)+232:16+36*Math.round(a/255*5)+6*Math.round(t/255*5)+Math.round(l/255*5)},n.ansi16.rgb=function(s){var a=s%10;if(0===a||7===a)return s>50&&(a+=3.5),a=a/10.5*255,[a,a,a];var t=.5*(1+~~(s>50));return[(1&a)*t*255,(a>>1&1)*t*255,(a>>2&1)*t*255]},n.ansi256.rgb=function(s){if(s>=232){var a=10*(s-232)+8;return[a,a,a]}s-=16;var t;return[Math.floor(s/36)/5*255,Math.floor((t=s%36)/6)/5*255,t%6/5*255]},n.rgb.hex=function(s){var a=((255&Math.round(s[0]))<<16)+((255&Math.round(s[1]))<<8)+(255&Math.round(s[2])),t=a.toString(16).toUpperCase();return"000000".substring(t.length)+t},n.hex.rgb=function(s){var a=s.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!a)return[0,0,0];var t=a[0];3===a[0].length&&(t=t.split("").map(function(s){return s+s}).join(""));var l=parseInt(t,16);return[l>>16&255,l>>8&255,255&l]},n.rgb.hcg=function(s){var a,t,l=s[0]/255,e=s[1]/255,n=s[2]/255,r=Math.max(Math.max(l,e),n),v=Math.min(Math.min(l,e),n),c=r-v;return a=c<1?v/(1-c):0,t=c<=0?0:r===l?(e-n)/c%6:r===e?2+(n-l)/c:4+(l-e)/c+4,t/=6,t%=1,[360*t,100*c,100*a]},n.hsl.hcg=function(s){var a=s[1]/100,t=s[2]/100,l=1,e=0;return l=t<.5?2*a*t:2*a*(1-t),l<1&&(e=(t-.5*l)/(1-l)),[s[0],100*l,100*e]},n.hsv.hcg=function(s){var a=s[1]/100,t=s[2]/100,l=a*t,e=0;return l<1&&(e=(t-l)/(1-l)),[s[0],100*l,100*e]},n.hcg.rgb=function(s){var a=s[0]/360,t=s[1]/100,l=s[2]/100;if(0===t)return[255*l,255*l,255*l];var e=[0,0,0],n=a%1*6,r=n%1,v=1-r,c=0;switch(Math.floor(n)){case 0:e[0]=1,e[1]=r,e[2]=0;break;case 1:e[0]=v,e[1]=1,e[2]=0;break;case 2:e[0]=0,e[1]=1,e[2]=r;break;case 3:e[0]=0,e[1]=v,e[2]=1;break;case 4:e[0]=r,e[1]=0,e[2]=1;break;default:e[0]=1,e[1]=0,e[2]=v}return c=(1-t)*l,[255*(t*e[0]+c),255*(t*e[1]+c),255*(t*e[2]+c)]},n.hcg.hsv=function(s){var a=s[1]/100,t=s[2]/100,l=a+t*(1-a),e=0;return l>0&&(e=a/l),[s[0],100*e,100*l]},n.hcg.hsl=function(s){var a=s[1]/100,t=s[2]/100,l=t*(1-a)+.5*a,e=0;return l>0&&l<.5?e=a/(2*l):l>=.5&&l<1&&(e=a/(2*(1-l))),[s[0],100*e,100*l]},n.hcg.hwb=function(s){var a=s[1]/100,t=s[2]/100,l=a+t*(1-a);return[s[0],100*(l-a),100*(1-l)]},n.hwb.hcg=function(s){var a=s[1]/100,t=s[2]/100,l=1-t,e=l-a,n=0;return e<1&&(n=(l-e)/(1-e)),[s[0],100*e,100*n]},n.apple.rgb=function(s){return[s[0]/65535*255,s[1]/65535*255,s[2]/65535*255]},n.rgb.apple=function(s){return[s[0]/255*65535,s[1]/255*65535,s[2]/255*65535]},n.gray.rgb=function(s){return[s[0]/100*255,s[0]/100*255,s[0]/100*255]},n.gray.hsl=n.gray.hsv=function(s){return[0,0,s[0]]},n.gray.hwb=function(s){return[0,100,s[0]]},n.gray.cmyk=function(s){return[0,0,0,s[0]]},n.gray.lab=function(s){return[s[0],0,0]},n.gray.hex=function(s){var a=255&Math.round(s[0]/100*255),t=(a<<16)+(a<<8)+a,l=t.toString(16).toUpperCase();return"000000".substring(l.length)+l},n.rgb.gray=function(s){return[(s[0]+s[1]+s[2])/3/255*100]}}),b=g,f=Object.keys(b),y=function(s){for(var a=n(s),t={},l=Object.keys(a),e=l.length,r=0;rs?e():!0!==a&&(n=setTimeout(l?v:e,void 0===l?s-_:s))}var n,r=0;return"boolean"!=typeof a&&(l=t,t=a,a=void 0),e},T={stageSwitchTransition:800,stageSwitchDelay:0,stageSwitchEasing:"cubic-bezier(.86, 0, .07, 1)",disableAfterSwitching:500,stages:[]},S={scrollNumber:1,transition:200,easing:"ease",items:[]},E=new RegExp(/-?\d+(?:\.\d+)?/,"g"),z=["webkit","ms","moz",""],D=function(s,a){if("string"==typeof s&&(s=document.querySelector(s)),!s||1!==s.nodeType)throw new Error("Cannot find target dom to apply scroll effects");a=d({},[T,a]),s.style.overflow="hidden",this.target=s,this.config=a,this.animating=!1,this.switching=!1,this.stages=[],this.activeStageIndex=0,this.initStages(),this.processStages(),this.defineActiveStage(),this.addEventListeners()};D.prototype.defineActiveStage=function(){var s=this.stages[this.activeStageIndex],a=this;Object.defineProperty(this,"activeStage",{get:function(){return s},set:function(t){if(t!==s){var l=JSON.parse(JSON.stringify(s));s=t,a.activeStageIndex=a.stages.findIndex(function(s){return s===t}),a.handleActiveStageChange(),a.target.dispatchEvent(new CustomEvent("stage-change",{detail:{previous:{id:l.id,node:l.node,config:l.stageConfig,step:l.step},current:{id:t.id,node:t.node,config:t.stageConfig}}}))}}})},D.prototype.addEventListeners=function(){this.boundHandleScroll=this.handleScroll.bind(this),this.throttledHandleStepChange=A(50,!0,this.handleStepChange,!0),document.addEventListener("wheel",this.boundHandleScroll)},D.prototype.removeEventListeners=function(){document.removeEventListener("wheel",this.boundHandleScroll)},D.prototype.initStages=function(){var s=this;i(this.target,function(a){if(1===a.nodeType){var t=a.getAttribute("data-scroll-stage-id");if(t){var l=p(s.config.stages,t);if(!l)throw new Error("\n Missing scrolling config for stage id: "+t+"\n ");a.style.transition="\n "+s.config.stageSwitchTransition+"ms "+s.config.stageSwitchEasing+" "+s.config.stageSwitchDelay+"ms\n ",s.stages.push({node:a,stageConfig:d({},[S,l]),id:t,step:0})}}})},D.prototype.processStages=function(){var s=this;this.stages.forEach(function(a){s.constructor.attachNodeToItems(a),s.processItemEffects(a)})},D.attachNodeToItems=function(s){i(s.node,function(a){if(1===a.nodeType){var t=a.getAttribute("data-scroll-item-id");if(t){var l=p(s.stageConfig.items,t);if(!l)throw new Error("Missing scrolling config for item id: "+t);l.node=a}}})},D.prototype.processItemEffects=function(s){var a=this;s.stageConfig.items.forEach(function(t){t.effects.forEach(function(t){void 0===t.startAt&&(t.startAt=0),void 0===t.endAt&&(t.endAt=Number(s.stageConfig.scrollNumber)),a.constructor.processColorValues(t),t.startNumbers=(t.start.match(E)||[]).map(function(s){return Number(s)}),t.endNumbers=(t.end.match(E)||[]).map(function(s){return Number(s)}),t.strings=t.start.split(E)})})},D.getCurrentStyleValue=function(s,a){var t=s.startAt,l=s.endAt,e=s.startNumbers,n=s.endNumbers,r=s.strings,v=s.isColor;a=Math.min(l,Math.max(t,a));var c=r[0],_=-1;return e&&e.length>0&&e.forEach(function(s,e){/rgba/.test(r[e])&&(_=e+3);var o=s+(a-t)*(n[e]-s)/(l-t);v&&e!==_&&(o=Math.round(o)),c+=""+o+r[e+1]}),c},D.processColorValues=function(s){["start","end"].forEach(function(a){var t=s[a],l=h(t);if(l){if(s.isColor=!0,"hex"===l)t="\n rgb("+C.hex.rgb(t).join(",")+")\n ";else if("hsl"===l){var e=t.match(/hsla?\((.*)\)/)[1].split(/\s*,\s*/).map(function(s){return parseFloat(s)}),n=e[0],r=e[1],v=e[2],c=e[3];t="\n rgba("+C.hsl.rgb([n,r,v]).join(",")+", "+(void 0===c?1:c)+")\n "}s[a]=t}})},D.prototype.setActiveStage=function(s,a){if(void 0===a&&(a=!1),this.activeStage.id!==s){var t=this.activeStageIndex;this.activeStage.step=0;var l=p(this.stages,s)||this.stages[0],e=this.stages.findIndex(function(s){return s===l});a?(l.step=tNumber(this.activeStage.stageConfig.scrollNumber))throw new Error("\n step should be within [0, "+this.activeStage.stageConfig.scrollNumber+"], got "+s+"\n ");this.activeStage.step!==s&&(this.activeStage.step=s,this.handleStepChange())},D.prototype.getActiveStage=function(){return this.activeStage},D.prototype.getStep=function(){return this.activeStage.step},D.prototype.handleStepChange=function(s,a){var t=this;void 0===s&&(s=!0),void 0===a&&(a=!0);var l=this.activeStage.step,e=this.activeStage.stageConfig,n=this.activeStageIndex;if(l>Number(e.scrollNumber)){if(n===this.stages.length-1)return this.target.dispatchEvent(new CustomEvent("scroll-out",{detail:{direction:"bottom"}})),void(this.activeStage.step=Number(e.scrollNumber));this.setActiveStage(this.stages[n+1].id,!0)}else if(l<0){if(0===n)return this.target.dispatchEvent(new CustomEvent("scroll-out",{detail:{direction:"top"}})),void(this.activeStage.step=0);this.setActiveStage(this.stages[n-1].id,!0)}else clearTimeout(this.animatingTimeout),this.animating=!0,e.items.forEach(function(a){a.node.style.transition=s?e.transition+"ms "+e.easing:"none",a.effects.forEach(function(s){a.node.style[s.property]=t.constructor.getCurrentStyleValue(s,l)})}),a&&this.target.dispatchEvent(new CustomEvent("step-change",{detail:{activeStage:{id:this.activeStage.id,node:this.activeStage.node,config:e},current:l}})),this.animatingTimeout=setTimeout(function(s){t.animating=!1},s?Number(e.transition):0)},D.prototype.handleScroll=function(s){s.preventDefault(),this.animating||this.switching||(this.activeStage.step+=s.deltaY>0?1:-1,this.throttledHandleStepChange())},D.prototype.destroy=function(){this.removeEventListeners()},D.prototype.restore=function(){this.addEventListeners()},a.Hover=m,a.Scroll=D},function(s,a,t){s.exports=t.p+"static/guide.0a8462c.png"},function(s,a,t){s.exports=t.p+"static/component.bd3411b.png"},function(s,a,t){s.exports=t.p+"static/resource.a72b8f8.png"},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAADoCAYAAACjM8mXAAASvklEQVR4nN2de7BdVX3HP+fc57nP5N6EhOTEJIBBKDRwRLAwo2BHsa21VusUZcZhaNW+FFpPrRan1GopymltsQWpijiKSot0wBGrdIpWMa3ASQEbm/AMOSQx95H7Pve89u4fa+/kcD3n3L3W+q19N/3OMEM4e/1+K19+a+211/r9vit106OHMEA/8G7gHcAuIAUcBH4A3A18H/BNDCcR3QZtzkIRcfaK/z4GnA+8D3gC+CTwVaBh08EkIK35/PnAQ/wsQStxLvAl4HHgjQb9ShR0SDoXeABYr9HmbOBbwT9narRLFKKStBG4Fxg39PNG4D9RRL/kEIWkHtQctNPS1zrgfiBraSd2RCHpE8BrhPxlgfuAjJC9WLAaSb8BXCvs83zg74VtOkUnknYBn0etgaRxNXCVA7tO0I6kAdQ8NOLQ983Adof2xdCOpFtx/yYaBm5z7EMErUh6D/CumPxfDlwRky9jrCQphxoGceKTJPxt10zSetQ81BdzH7YBfxSzTy00k3Qb9gtGU+RRi81EIiTpncDb17Af64Br1tB/R6SBXuCGte4IiqTBte5EK3SjIigJ65X1wDvzuexnJYwViiUJM4CKpF+TMNTblebUIes5//0SfZFGGnilrZFMdxdXnbWJt54+Tqa7y8bUOYVi6ULb/kgjDWyyNVKuNzhWrpHpSnPxFusvmSttDUgjDcxLGHqwNIPnw+7xQdb399iYuqJQLFmFozTSwDMShmYrdYqTC6RT8NqtozamTgF+QaJPUkgD35My9l9H5ql6PmeM9rN1uN/G1K9I9UkCadSphsgZWbneYM/ROQAuy47abEQl6oQlDfwEtfcsgr3HFpivNdic6WHnOuPv1t2FYmlMqk+2CD9LPoTQIWLd89lzVL0LLjl1xDSaUsAlEv2RQEjSj4G/kzK6b2qR+VqDTZkeTl9vHE0XSPXHFs27AB8G/lvCaHM0vXqzcTSdJ9EXCTSTVEUt5MoShvdNLbJU99ic6WHbiNHnyjkS/ZDAyp3JfQgdIdU9n4ePqWi6aLPRKnx7oViyWpVKodUe9z8Cn5Mw/vjEIlXPZ/tQH5sGtaOpi2TsTrQ9Lfl9YI+t8UrDY+/EAgAXbhoyMbHBtg8SaEdSFbXPdMTWwd6JBTwfdq3LMNKnnQ5l/fEtgU4nuC+giKraOFioNnhytkwK2L1Be+Mx0ZEU4iHUJr0VHj2mhtzuDYP0pLUWBC8JkgA+Ddxj4+TwQoVjyzX6u9LsGhvQafqSIQlUEulhG0fN0aSBzTY+pRCVpGkUUcY4ML1E1fPZMtDLeCby8ud0G59S0MmZvB/4Z1NHNc9n3/QSAOdGj6ZzCsWSbvKrOHQ7kAcqps6emFIknTM2QHe0CXwYlRK9ptAl6XksVuM/XawwEUzgp0ffa3q9qT8pmISyVdbJY5OLAPxc9Lfc22z8ScCEpAOodGMj7D9exvNhx3A/mZ5IhyKXFIqlM0z9ScB0Uvy6qcNyrcEzc8ukU+pTJQJSwAdM/UnAlKQf2jjdd1wNubPHIw+53yoUS7tsfNrAlKS9Nk6fnVmm7vlsHeiN+tHbA3ymUCy5yAReFaYklVELTCPUPJ8nZ5cBODP6HvhlwAdNfdrAZqG2YON4/4xaM2mQBPCXhWLpLTZ+TWBD0rCN44Ozy9Q8n82ZXoZ6I+8zdQF3FYqlX7bxrQtTkgbQK+n6GdQ8n2fm1JA7bVTrSLwXuKdQLL3Dxr8OTElarSgwEg7MqIOZiEuBZvQBdxaKpevjmMxNSRKpWnp+roIPvGyoj74u7a6kgD8H7i0US04zd01JukzCebne4NBChXQKdugNuWb8KvBwoVj6eYk+tYIJSd3I1b/xVLAU2DlilapzBrCnUCw5yZIzqeZ+FYLVSwfnlmHrKKeN9JPCKgdoAPhyoVi6ALWlI1ZFbhJJr5NyDjBdrrFQazDQnWYs+o5lJ1wLfBn1FhSBCUmiKTE+nFgKbDfLGWiFK4DbESpoNCHpIgnHzXhuXpG0wy6FcCWuBD4qYUiXpJ0oJQlRlObV+ee2ob6o27pR8aeAdV64LklOXrNLtQZTlTo96ZRJYkUndKGqr6wOE3Qbv8LGWSccDOalrYPi2TbnYVkaokvSy22cdcILi2rIZe3rU1rht20a65LkLF/oSEDSlsFeFzX2v4jFroUuSaeYOloNc5U6S3WP/q406+zKLlqhD3i1aWNdkpx+SJYW1LnnliGxdWAzjBNVdUlyWtl4uGnIOYDxVJEokhxP3sZpPLok1U0dRcHEUhXPh7G+bnr195dWg1HSJuiTVDN1FAV1z2eqUiMFOuk5UeGZNtQlyfgYKSqOLqr/D6cMiJNkXPyoS9JPTR1FdlBW89Im+UiaM21oknrjFBNlNe1tlCfpoGlDXZJ+YuooKqaX1XDb0N8jvfJ+2rShLkmPmzqKinKtQbnh0ZNOMayfHN8Jj5o21CXJOC9JBxNlFU3r+8VIOoxFQbYuSUeB/abOomIyIGlMLpK+bdPYZMVm5TAKjlfU5L1OjqR/smlsQpJxmnJUhCQJRdJh4N9sDJiQ9EPASJ86KmYr6shMaE66FcvPKROSPBxH01xV/Z1GerpJp6wWAjMICH+afkV+3tZxJzQ8n8V6g3QKBqJl6LZDAUWUFUxJ2gd819Z5J8xW1ZAb7jUmqQR8SqIvNvsRfyvRgXaYq1iT9CfAkkRfbEj6BvA/Ep1ohdlgXho2G27fR0nvi8CGJA+hY+RWWKyr7Z+Bbu0u+sAfIniRg+323904+p5bqqnhNqQfSV/J57LG32mtYEuSD/yZREdWIoykQT2SfOAvpPsisZF8H2oOEEU5IGmoR6uL/5HPZQ9I98WapHwuG84BxnvIrVAOhlu/3oHAlyT7EELkSCKYA+6QsBWi0lCcZ/QmbidbOZLnNtdhsY+8EnXPx/N9ulIpnZylSSn/zRAjKZ/LHgU+ImUPoBxEk8YZnBO5fukTwFuAR6SMVRpqqaNBkpMSeVGS8rlsA3gvQunBNU+RpDHcfknC70qInyXnc9kiSrrDGuHkrUHS2wrFkni2hSthguuxlO0ANXkDaCyVtuLgPhQnJOVz2Tngj23tNHxFkubG23WFYsk4OaIVXEpcfBXLSTyMpF69tOWXAR+z8bsSzkgKVuLX2dhomH/HXwO8wcZ3M5yKpeRz2e9gWfltiBSqvkTkmrQ4FGXElFA1sRH4F1T1khXiIOluhITRDXABam60Ok1wTlI+l11EXcW4Vngzluu2uAScvhWTn3b4XSxeInGR9IBJo74u9eqvWLzmmvBx4A9MGsZCUj6XnSCGLLkIuBmDa9ni1EvbF6OvdkihKirfrNMoTpK0kyxCrYCqJ3rNdxfwFTRuQoyTpCndBqG6aV2WJFCVDd8k4uXHcZKkfeR8IpIaomcMIbYRMfEjTpK0V779bkkCVVF59WoPxUmSdql2uASoySwB2uFGVqk7iZMkrY/N7nSKrlSKmuef2FdyhI2oLee2iJOkHToP9wRDreJuqDWjo65vLCQF+rValeDhRltF/s3WCmfS4XaLuCLpLDTrzcJjpOV4Igk6KPnERZL2VWQhSZV6bCS1FYaIi6RLdRv0BTtAVbdvtmac1u4H5yQF85G2EnJf/MOt7XQQRyS9CgM9ga7gGKnu9vXfjDUl6ddNGoWnto143m4As+1+iIMkIz3t8EDS8UKyGYtt++LSa6FYeiVKlO6lgLZbOa4j6TdNG4bDrR5bILWv0XVGUvBWu8K0ffBtix/fcGu7c+oyki5B7dkYIdz817xWyAZtb0l0SVJsAr4CmKJDja4TkoIb/t5uY8PztbPcbNAxD91VJL0ey8uiwn1ty6LAqPhupx9dkWQ8Ya8R/r3Tj+IkFYqlDGAtUV8zS+AywdPAE50ecBFJl2MpjQ8nN/81yyZM8M3VHnDRAytNxxDhEqBPv95NF6tmvIj2oFAsdSF0jX14amug+K6Do8D3VntIugcXo04frHFyuDmdk+4iQmK+NEliV2XENCd9LcpD0j24VMpQteHho4aboxfcfiKWfomRVCiWRlC7kCLwfFiqN0gB/d1WKY/tcHvUByUj6TVYJnCuxEItqOi2U5lohTrwxagPS5J0qaAtABaDEtNMt/h4+wYaIn6SJO0WtAXAgnnZ+2q4TedhSZJErg5qxtIJAQVRkp4EvqPTQISkQrG0HtgiYasZjiLpH9BUn5CKJCdX1oc6SqPmoi4rsYTGhB1CiiQnF43PV9Vwi3jlYhTcjYGeUpz5SdqYDyJpnVwkGYljSZG0LGTnxUbrHjXPp78rLSE9/SSGciFSJImJJqxEqKM0ZB9Nt2MoF5R4ko4HilwjdiT5WOiYSGmVHMVRTdtMqDlpdwPFXuAF08aSE7cTudfpSqCDa/eG+1ebxpIkOSmwmQ0iaUPGiiSrejtJkn4gaOsEZoI5abzPeLhNA3ts+iBJ0oOCtk5goVrH85UAnuF+94+w1E6RlAZ6CguJ+XbwfDgeLirNtHAftu2D9Ir768L2AJgK9LkNpaettTClSbpL2B4Ak8G9AWNmkWT91pXWT/oRavkviqllK31u4/VRCBcfuLdIGwxFzA1uxakhoPPmgqQ7EBLmDTETRlJvt+41HUsIyLu6UOKaAb4gabPa8JirNejWv6ZDRDbN1X7SJ4CqpMFjS0aTt8hGlCslrkMIi3NOhDfj6M1LGQnfLncmPwaUpYyFa6WNersBvQhsLbtU4iohqJ00GUzeBlea7bD17XqP+0ZgQsLQzHINz4fxPu0bKKzPA13Llc2itPqtUfd8jlfrpFMp3W+42O/mNsEdCKkbTwRvuHE9kl5n6zcOJS4f+B0E7qsM33CaF+SdhaUmblz6SY8Bf21rJ7zSbIP+fveVNn7jPJz8KPCUjYFp8zfcuwHj/d/YSMrnssvAe7D4lpqr1Gj4PqO93brVS1ngraZ+Yz3mzueyD2KxEvd8mFiukwLG9HcEPoLhZ8pa5AJ8ADhi2vjYkvokNNiAOxdDheXYScrnsscxVOmDkytvwytgPw6s1220Jlkl+Vz2HlQajDYmzb7hQmwG/ka30Vqm3rwPg1yh8J7cTQPGAu5XAW/SabBmJAX5A9frtluoNlhueAx0p8mY51J+Edge9eG1TuK6BfixbqNj4RWw5ldTj6FuNI0UjmtKUj6XrQPv1213cuVtlR9wIfDZKA+udSSFa6f7dNpMmu1StsK7gA+t9tCakxRAS9N/smz8edIKN7BK5XkiSMrnso8AD0V9frppGSBQUJFCfQVc1O6BRJAU4M6oD1YaHvO1Br3pFIO9IunLA6h6k5biM0ki6X6dh8PJe6xfLH15I6poeXTlD4khKZ/LHkTj1pwwP2DcLpdyJXahkj5exHxiSAoQec00tRxu5YqSBKpk/0W3siaNpMi7A2EkCSwDWuHDwGvDPySNpOmoD4ZJFJYLynZIo2ri+sI/JAmRExzK9Qblhkd/V5qMfNEgKKnXayF5JGldhxgOOcM0wSi4BsgkjaTNOg+H2ybr+pxEEsCpwFuSRpKWkuB0kAG33jzHOwrelBiSgmsQX67TJqw70TzR1cXFiSEJpYetFRLHwzRBtyRtSxJJOd0Gc5WwstIpSe4VnDRwnm6DmuezVPfoSadcqFCEWEoSSdqRBCcn72F30bSQCJIKxVKKDhr9nRCWeo32OfurJIMklLKpkQ7c8RPaAf/PIwmLlL1w8nZI0nRSSNpp2nC+JlLI3AlTSSFph2nDhUCFYtgdSUeSQlLk09SVCDWWRtwtAQ4lhSTjhPRqw6Pq+fTJqFC0wv6kkDRm0zhUxxl0E02PJYUkK2mh+aoacg5W3c8BzyWFpEGbxuVAk9KB9tu9kJydSasQWAxUBAflpRbvguSQpHVj10os1dVw65cVE95LILqQFJKsEArkCWu/fSr8lzUnKbhPwArlIJIyckuAp1G3wwMJICmfy1rXnCwHN8AIDrcbUKqmQAJICmBVUHxSu1vk7fYcKwSpkkLSgk3jUJZaSOD8RlZUVCWFJKtICu/JFYikQ7Qo108KSVYqEFUviKS09V/nJlqU6ieFJONaE1AX5R1ZqjKxXLNJD5ykjQ6l07MYDeyjKdXFBHf+7zHbPtxKG/kQa5IKxZKtCYBHJIxYoAzc3O7HpAw3LelnB/gCHebFpJBUwpFwXgTUgEKnB5JCEsBn1sjvrcCznR5IEklfw5FWZQc8iyo77YgkkdQAfg8BUaiIWEJdHLqqHG2SSAJ1r9FfxeBnEVXdHUleMWkkgQr/Oxzan0bdZPjtqA2SSJIPXI36RJAeeg8A56Mp85pEkkCR80FUrayECuoRlMrE5cDzuo2TSlKI+4FXoKorD2i29VBrr/cCpwGfwzAyUzc92vZK6qQhBVyAioYLUfkD46jT3xTqLtsXUDKuD6EIFvlm+j9JBs9yxSps9gAAAABJRU5ErkJggg=="},function(s,a,t){s.exports=t.p+"static/web.61b1f33.png"},function(s,a,t){s.exports=t.p+"static/plant-1.a9e9851.png"},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACzCAYAAABrYOVnAAAZUElEQVR4nO2deXycVbnHv+9s2WaSWTLZ0zZtgTa1pYWygyLggiBVwAWLC1oBFZd7ld6LIli3661e0bv4UayscsUFsd6LXrygAhfQVmiBtpQuIc2eSTKZJJNttvf+cZJp9sxM3m3eme/nM582M++855nML8855znPeY4kyzLZytYPf1JvE2biBK4BrgAagTpAAlqB54BfAE8CGf3SH7r/B8pYqQE2vQ0wCW7gC8AnAO8cr6+beHwcOADcCvyPZtbpgEVvA7IcG/BJ4CjwJeYW1UzeAPweeBBwqWeavuSFlTkXAS8A/wGUZ/D+64G/AKuUNMoo5IWVPjXAA8BTwIYl3qsReBY4falGGY28sFJnLXAXcAz4IGJQrgSVwP8CqxW6nyHI9cG7ByieeJQixjwFE/8vRnin1cDZiLGRWviBR4DNQFTFdjQjV4S1FngzsGni/ysQnsJIn38DYtaYPTGFBTDSL1ZpnIgZ2w3AGp1tSZVPkReWodkKfBuo1tuQNGlE/BEc1tuQpWLGwft3gJ+SfaKa5CK9DVACswnrduDzehuxRNbrbYASmElY64Gv6G2EAtTqbYASmElYXwOsehuhAH69DVACswirArhSbyMUQqnAq66YRVhvxRzeCiChtwFKYBZhbdbbAAUZ0NsAJTCLsFbqbYCC9OptgBKYRVg+vQ1QkE69DVACswjLTAlzx/U2QAnMIiwzcURvA5TALGuFMb0NKC60c+7GGlYvd2OzWjh6op/n93UQHomkcxsZeFklEzXFLMIa1rPxM9dVsnVLI85iR/K5jY0VXP6mBh78zSH2HepO9VZHgEE1bNSafFe4BKxWife+Yw03vn/jNFFN4ix2cPN1G7nwzLpUb/msogbqiFk8VlzrBpfXlPKBq9bSUOde8DpJguu3NNI/OMbBo4tGEp5TzECdMYuwwlo0IkkSpzV4uficZWxqrEBKcfHFYpG44Zr13Pn9/2N4dMHM42eUsNMImEVYqoxLrBaJcm8xK2rLOK3BQ+PqcrzuwozuVep08J7L13Dfr1+Z75IWTDIjBPMIKzTzCbergFXLPHjKCnGWOLAs4F3sdisOmwVJkigusuEsdlDqdOD3FmG1KjcMPW9TDU/vbaWpdZa5AI8p1pABMIuwpg1ern37abzlguVIqfZVGiFJsOXSU7jrvr1zvfx7re1RE7PMCpPLIBdtruOtF64wnKgmWbvay+rlnplPh4EndDBHNcwirGYAq0VKXHWp8fd9vu3ChplPPQaM6mCKaphFWEcATm3wtpe5CvS2ZVE2rCnHN30S8Eu9bFELswjrONDXUFfWobchqSBJEudtSqa2hzDZwB3MIyyA35Z7inr0NiJVzttYMxkH+yUwpq81ypO1s8Lh1t3c/fW3JX++8fbHv13gsG3X0aS08PuK8ZYVtveFxu6Z+jkmufH2x3WwSjmyVlhTsAKfvfvrb7sJmDUqNjLf/PwbqyRJuh/4EfB9dFiaUotsF5YEPAxcq7chmSBJkhU4FfgX4DzgvWRYn9RoSNla3Ha4dTfAR4B79bVEUT4C3A9QUr9FX0uWSLYP3j+mtwEK83G9DVCKbBfWJr0NUBjTfJ5sF1Yeg5LtwtqvtwEKs09vA5Qi24W1S28DFMY0nyfbhXU/8Cu9jVCIXzExIzQD2S4sGXg/otjaESAy8e+X0ChdOQNCwG1Mt/fziM+RnbGfOcj2ACmIaPV3Jx5TKQOMuMTzb8C3Jh6mJds91kLchfFynMLAv+pthBZkbeR9JhOR+Jl8FfiyxqYsxJeAb858Mtuj7HNhZo8Fortp0duICY4i1gRzArMLawSx7KO3W5aBm4Fxne3QDLMLC8Qmhe/obMO3gT/qbIOm5IKwQNR/1+uL/S3wRZ3a1o1cEVYEuBqYdxuySuwHrsNECXypkivCAlE09hLgRY3a2wNcihjn5Ry5JCwQO6YvAdROKH8MuAwIqtyOYck1YYHwXFcgTrJQuouKAXcAVwFDCt87q8hFYYEQ1B2Ik1P3KHTP5xD15r+GSQ4BWApmWCvMmB17txyzWxK3XFZ/4JrT3N3vK3OMrEj3Hi1hX+LZrtXDR/urqmS4B+gCAkATYoH5AHDozrN26x1L0xSzL+kk2bF3iwU4AzGgPh9xWti07WKrSjvYuuIJJGsBWB0gzeHQ5QTEIxAf48hABT87cXkq5gUR1WTuvfOs3U/OfNGMSzqm91g79m6xAp8APgesWujapsEa4mNDWKWJ+lWSFUmyIEsSkiwjywmQpwzL4guXiZyCF3Hq69Yde7c8dOdZu69P+4NkGboLa/uvlbnPnWfN+9ItwPdSuYcMjMQLcNkmIgRyHHlCSHP5dbc9o0KCW3fs3XLrnWftTpZeUup3ALDzauXutRR0F5ZS7Ng7b3eS1nFzY4lCXCmGnrz2QSQyWoiUF7DXFOTCrLAtnYvjcuoF26xSHJc97UTVbsTg3tSYxmMtwBeBtcA5811gt0JFKXhLwFeQXqD8LauCvD7qJDgMfWEYWrxuzIOIP2hThyTMLqxiRDB0VnV/iwSn18Pm5dDgA5sFEpFBRo6ml3R6RkUv55QvS/7cNwyHu+GFFmibO+7+BeBDCIHdjYkqJU/FrF2hE/gHRAnJHzPHDuMPnw/XbYZT/EJUAONdT6fdUHxsekkuXwlcsBI+czG8a/59zRWIDRSvAo/MZV+2YzZhScAHEV7gW8xzcLffBWsrpz8nR4eIDzWl3WBifP7lwPMbRFsLYEFkXbwA/CdQnbYBBsVMwlqOSOp7gEW+oLpZRYtBsjuxFHjTbtRedtqCr9endksJkV5zCPho2kYYELMI62rEcWyXpHJxadFcz0oU1l2OZLGn3Ki1uBq7b+OC13iKU74dgBv4CcJ7laT1ToOR7cKSgG8gdhGXpvqmgnmmLJZCH0UN12JxlC16D0uhn8Jl75x72SeFthbhOuApsrhrzGZhWYH7EOGEtE4LWOjLthT6KVq1FUfFeUi22e5Gsjiwl59JUcN7kKyLn6tjs6Zj2TTOBP4MpHwmnZHI1nCDFXgIeF8mb44sch6rZLHh8J+Fo3wz8dFuEmM9gIzFUYaluBrJMvtswvkYX/Cwr0U5FfgTYtE8aypCQ3YKS0KMQzISFUA01dCkJGEtrsJaXJVpU4wt/VDh1cCjiPFjWucA60k2doW3AR9eyg1iGm5tiCrT1gXAPylyJ43INmG9HZGhuSTSO/97aSx87mVa/B0ijz4ryCZhVSHqRy3ZZi2FNahcWRIJUZgtvQCGTmSTsH6IWApZMoMaHjASUnbz13KMWZppFtkirKsBxRKYhjWsoKCgx5rkVqBy0at0JhuEVYjCtRfCGnms0ahig/epFCMyJAxNNgjrMyh8Rk40DmENvFaPesUqb0ZULDQsRheWC+H6FSeowcZ3FYXlROR0GRajC+smoFyNG/drIKyAunuht6l69yViZGHZgE+rdXMtPFavunWbNwCnq9rCEjCysN4NLFv0qgwJDqt155P0qF+94RrVW8gQIwtLVVevsjchIUOv+sJ6l+otZIhmi9AHDhyY8/kPnTr7uQeOvKEelZcv+lQWVmAIYurvw1kP1F1btye5xW3PPCVOzj77bNWNmYre2Q0OYCUzsiVXlA58YCBSoKo3lRIQHpaxqtRKVz94CtNKExPIkJBTV6THPnwD8LuJH0cQxUh0L6KrWVGQGR6rFtiBSH1xamJAFiDLMmNjYyzxOxlBpNncjtilBGjvsfQYY21GlGv8GHlRJZFlmfHx8aWKCkRkfividzzvJl210VpYpcBvUGgx2UxEIhESCUUHZR5g98S/mqO1sG5BdIN5phCNRonHVck+rETkcWmO1sIy7PRYL2KxGNGoctmAc6BLYSOthaXoYnK2k0gkiERUzzpcrXYDc6G1sFLfDWpyJgfrGlCgRSMzMXLk3bQoOAM0LHlh6YAKM0DDkReWxqg4AzQUeWFpiAYzQMOQF5ZGxONxLWaAhiEvLA3QKKxgKPLCUhlZlolEIqaeAc5FXlgqkwszwLnIC0tFIpFITswA50LvRL+soKysDL9f1Mnt6elhYGBg0ffEYjFisaXXMMpW8sJagKKiIioqKnC5TpY+rq+vx+12EwgEGB2de/98rs0A5yIvrDmw2+1UVFTgdruRpJPpxbIsI0kSLpcLp9NJKBQiEAhMi03l4gxwLvLCmoLFYsHj8eD3+7HZTv5qhoaGCATE8Td+v5/S0lIkScLj8eByuQgEAoRCIeLxuOnXAFMlL6wJysrKqKiooKDgZDLA6Ogo3d3dhMMnt/S0tLTgdDqprKykqKgIm81GTU0NPp+P9vb2ebvHXCPnhVVUVJT0QpNEo1F6e3sJBoNzep9wOMzw8DBer5fy8nLsdjsFBQWsXLkSj8dDR0cHw8Ma7Ig1MDktrKqqKnw+X3IclUgkCAaD9PT0LBomkGWZvr4+QqEQXq8Xr9eL3W7H4/Hgdrvp7OykrS2tE+1MRU7HsbxeL5IkIcsyoVCIpqYmurq60oo9RSIR2trapnWXkiRRUZHb+0Vy2mNNdnPhcDgj75JIJHC5XNTV1eFwOGa9lsvktLAmyUQERUVF+Hw+3O6TB45PLt8UFi5+YoXZyQsrTaxWK36/f9rYDKC3t5e2tjZqamooLCyc9loukhdWGpSVlVFZWTmt2wuHw7S3tyeXeSyWnB62JskLK0WsVis1NTVYreLUpVgsRkdHB93d3cmxmsPhwOnMVw2AvLBSRpKkpKh6enro6OhIbt+SJInKykqqqqpmDeJzlbywUkSWZQYHB+no6GBwcDD5vMvlYtmyZZSUZPW5lYqTF1YKyLLM8PAwhw8fTj5XWFiYXMqZGmCNxWJ5r0VeWAALLhpPbi6dDElMBj9ra2tnLVS3tLTg9/tzPjgKeWEtytTUYpfLRX19/bQBeiQSob29nd7eXmRZzotqgrywIDkon8nUzaUWi4WVK1cmsx9kWaanp4f29vZp+Vh2e748BeS4sCbHRk6nk7q6Onp6epIzvZmbS61Wa3LsNDg4OGt9sKCggOrqasrKyqbdO1fJaWH19/cnF6LdbjelpaX09vYSCARmZYFKksT4+DhdXV3JpD8QnqyyspLq6uppY65gMKjZ5zAiOS2szs5OQqFQMq/dYrFQUVFBaWkpnZ2d9PScPN87Fotx8ODBaZkPPp+PmpoaioqKks8NDQ3R3t4+LSSRi+S0sEBkiZ44cQK3201FRQUOh4PCwkIaGhooLy+ntbWVcDg8baG6pKSE+vr6acmBkUiEjo6Oad4sl8l5YU0SCoXo7e1NeiGr1YrL5WLt2rUEg0E6OjqQZXlW7Coej9PZ2UkgEMjp7V4zyQtrgkgkQiwWo7Ozk/7+fmpra5MC8vl8eDyi+PDUReZgMJjPc5+HvLCYvbl0bGyM48eP093dTV1dHaWlpdMENTQ0RFtbG0ND6h+Wk61ofTJFCIOdDDq5ZWsh/H4/VVVVAHR1dSWDodnCg4/u0zz2kdMeK9XNpT09PdNmiHkWx/bp236kWWM3bb1As7YWIxcKzE6hEqhGnFIRAYaBDkC1KWzOeiyz1qwaj8TpCYbp7R8hGBqhV5xR3DXP5YPAq8BfgD8CTyAOeVoyWgrLMx6JSQUO/bVstvJC/QOjtHYO0N41SF9oJJ0/mFLEQU7nAJ8FRoHHgfsQR9VlXDBVuuUff5jpe+djHXABcC7QCJwCeKdeUFzkoNRZiNddjNddTJW/FK+7WJP1tVgsZoqiHeHhcZpa+2lqDTIUVuUggk7g34EfAX3pvlkpYZ0LvB+4igyPNbHbrdRUlrGsxsPyWi8lxcony6UyAzQy0ViC11uDNLUE6dHiUGvBEHDXxCOU6puWIqxi4CPAzYgjZBWlstzFymXlrF5RTnHR0kWWSCSydrAeGhzjyOs9HG8JEtPgPOB5CAC3IbrJRY3IRFhO4O+BTwPl6b45XSRJoqayjMZTKlle58WawfYqhU4u1RRZhrauAV49FqBb7ZPR0+NJ4AagdaGL0hlJ24BPAHeggaAmkWWZ9q4Q7V0hCgvsrFldybpTqnCWpH72UDZ5qnhC5vXWIAePdDOozthpqVwKvITQws/nuyhVYV0A/ADYsHS7MmdsPMr+g228dKidhnofGxtr8fsW3seXLVWLo7EER17v5dVjAUbHDH96hQd4GHgL8ElEbGwaiwmrAPgq8AUMVJlGlmWaWnppaumltsrN6Y211Fe7Z10XjUYNn3EQjSV4ramHQ8cCjI8b29Y5+Bhi1r+FGQP7hYTVAPwSOFM9u5bOZDdZ7inhzA3LWFEnIhvxeNzQ59bE4glea+rl4NHubBTUVN6IGHe9lSlhifmEdQlCVN55Xjccvf3DPP7Uq/h9Ts5cX4/fY8yKLwlZ5lhzHy8f7sqGLi9VzgAeQ+hmBMB69oVXzrzoWuDXiNlf1jEyGuFYcy+dgSGczgKcKsTDMuVEe4in/vo6TfqGDdSiDlgJPAKzhfVuxKDMON9GhoyMRmlqCdI/OIbPU4yeS0k9wWGe2dPMq8cCRCLmWUqag/VAE/Dy1N/2OcDPMNm5za0dIdq7Blizys/606pw2OfeQ6gG4eFx9h3qpLmtX7M2DcBO4NFJj+UB/kQWjanSQZaF1zjW3IfNZsXrLlJ1XTIaS7D/UAfPvnCC/oGcS1t2As2THmsnoo80NeORGHteauW1ph7OPr2OKr9r8TelSXNbP3870M7oqGkG5plwqfXsC69cBtyLgeJUajMeiSXHX+WeYhwKjL8GhsZ4Zm8zh44GzDgwT5dCG/AhcjThr7UjREf3IOvXVLFudQUWS/rdYzSW4OXDXRw+HiCRyI5lIw2otGHwAKjaxOMJ9h/soLm1n3M31eP3pl5A7UR7iL+90s7IaPbndymMZCOHusCFCA2O8vjTRzi1oZyNjTULzh7DIxH+sq+FzkB++9c8tNpQMaE+25BleK2pl6b2MMtOa8RTUTXjdZlAazPtx4+QMFFqswo8bwP2Atv0tsRIRMfHOP7yi1jcy3EsfyOSo5jESJBI81PIw/m/wxR4xAb8FyK32VSBUSVIhE4wNvRzJFc18kAryDk/20uF14DHLYik+Yd1Nsa4xCPIoRN5UaXOdiA+OXC/DbHHLE+epXAf8Fs4OSNsB27Sy5o8puCvwKcmf5gaangY+LLm5uQxA/uAK5iyi3pmDOvrwFc0NChPGlgsUGA3XNHc3wMXM2NT61xLOTuANsRM0ZhpmDmEq1hiQ4OddcttrKi0YLPCQ38c46Um3dOZY8A/A3cCs4J6860R/gTYD/wUWKOaaXnmxGKBtfU2zllj59Q6KzOXMEtLdF8seQWxkWLvfBcstPj8AiKX+avA5xa5No8C1PgsnHmKnU2rbDiL5u/ygkO6hT5GESlW32SOLV9TWUwso8CtwP2IvfuXKWFdnpP43RbesNzGptU2qjyLe6JYApo6NV9OiiB6sW8gIgiLkqoXOoDYnHgZ8DVEEZA8M7DbJCwSjEfnT5/xuCzUl1tYXmmlcZkVX2l63drB5jij45ql54wDDyG+8+Z03phu9/bExOPNiE2sbyefHZHk5isKqfdbGY/K9A7KDA7LROLgsEJJIfhKLZQUZj6rSyTgyf2abLtvQZQv2kWGSQqZjpv+NPFYiag281HAl+G9TIEkQeVEV1Zgl6j1SdQq/Bt55mCUrqBq46sI8AfgHkT0fEn97VK9TRNibagOuB6xaTEnk729LgsOm3oxppZAnMdfUNxbxRG7mLchapS+E3iUJYoKlJvpjSH64ocQO32uAa5DbL/Wbr+VjlR51RsRdIcS3PuHMRQqQzGCGM78NyKzZb76pEtCjRBCEPjxxMOL2NN/5cS/fhXaMwTVKczoMuGV5ji/eGpswQnBIkQRoaOnEfVFn0M4AlVROzYVRKxBPozods9B1Fe6CDifLN3GPxfVXmUdc1tvnKdeifLS8bTd1CCwB3hm4vFXFKqEnA5aBj0TwPMTj8m2z0B0l+cBZwH1GtqjGKfU2li3PHNhyTI0dcU5EUjQFUzQ2hOnbzClQXofYgH4RYRX2gccA3TfLqRnND2G+MvaM+W5CmAzYufQGYhaAA0YNKRRYJd40wYHbz7dTgYVLAFo7o7zm+fG6eibV0hjiBjS68DhicerwKGd25x923cZqoxkEqMt0wQQ9cV/N+W5EsR65RpgjbNIOsNmldaNR+Xq0XFZj+IlcSCyabW94N3nOyyFjsxngvub4iMP/3n0eCJBO+KzBxAZve2IWFLzzm3OTiWM1hqjCWsuhhFu/gWA8KjMpKf/+DuKT7VI8reiMd4VHpWlgRGZ8KjM4EiCkTGZ0YjMWISJf2XSKEM6gPiSu4ATiC/5AGLx9TAQu+7igjJZ5nlgbYaf656NK603blzpNOV2HzUOENCcnduc1wAPIEqEz0s0DrGYzMCIfON3HxnZzcnJw2Q5mBiirnmq7foRAcVZRcYW4TuI+N+Sx0JG7QoNOXZJl+27wo8gvtwFZz92KxQVSL+q8lgmlyqaJh79E4+0dqBu3xXu2b4r/E7EBORuFl9PexG4HLGwr/sAW01M4bEm2bnN+SZE0G+uMjIRhKe4Y/uusGrdz4QXW4+Y4foQXrAb0ZUfU7o9o3osUwkLYOc2ZyPwPcRCeS/iy/wD8OD2XeFmjWzQohnAuML6f3bWDRMt4vpGAAAAAElFTkSuQmCC"},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAABbCAYAAACVp/ucAAAbGUlEQVR4nO2deZgcZZnAf1XVPVfmyjkZJgkJwRxcOQwJQSAQIAMoiKARgyDKGlHEdVnXx5VIXBjwfFhdRdfRICSLKKIiohLuHBCOAOEKgSQEkkw6IZNjzp7p7qraP96eZDLTR1VXVVfPpH7P08/0dFd939fXW+/3nsqiq79MwGHuvecXKR9/4+obe+6eBPwd2ANcBDRnGu+k5Xe4uLqAAG9R/V7AAORXwDjgVOBHPq8lIMBVAoFgj2nA6b3+/xxwhk9rCQhwnUAg2OOsPv8rwM+BkA9rCQhwnUAg2OM1wOzz2DTgeh/WEhDgOoFAsMcqYFmKx28BavO8loAA1wkEgn2+Aezs81gl8GMf1hIQ4CrB3jcDB95K6YJsARYD/+jz+GeA3wBPZRtj6NSvuLPAgACXUXKMQygDzgHmAtOBYUA10In45bci++1VwCZXVponGhvqLR237aZVvwWu6fPwRmD6hNvmxV1eFkPGftztIQMC+mFXQxgPfAu4Eii3eM524H5gOfC6zfkKmRuBBcAxvR47Afg34Ie+rCggwCFWbQgh4L+At4EvYV0YgATxfAPRGJ5GhMqAZ8Jt8w4A1x16QIGicdWUzay9JX6gawnwWSRGYbhPSwwIsI0VDaEG+AMwz4X55imKssY0zWnAfhfG85UJt83727abVv0euGLYZVOomlkDUAzc2ufQZ4FLgH15XmJAgC2yaQh1wBrcEQYAmKY5ZtqUUc82NtRPcmtMn7lBqyjeXzWjJtMxpwN352c5AQG5k0kgDEUs5h9ye9KNW5onx2L6m40N9T9tbKi3s/0oOCbcNq+5cn7NyyhZD/0YcK73KwoIyJ10AkED7sMDYQAQTxhs3X4wBHwNeLGxod6TefJF+UnlVRYP/aanCwkIcEg6gXAjYM3/liN79nX23J0CPNvYUH+al/N5iWkmhlo89DzgOC/XEhDghFQCYSLiUfCUto5Y739HAI80NtTP9npeLzBNw8TUrRyqAl/0eDkBATmTSiDcAZR6PrHab9NdBfy5saF+IOYE7Df1WPajhM8TRIgGFCh9BcJsxD3mOUNKw6kergPuaWyoz26iKyy26PHO7EcJNcBHPVxLQEDO9BUI/56viUcMTauEnM/AM769auhdmIbliOVrvVxMQECu9BYIdcBl+Zp4bG1Fpqdva2yo/2y+1uIC6wD07harx19IkC4dUID0FgjXkKe97dDKEqoqijMdogHLGxvqb2lsqB8IKdpjAAy9Gz3WZuX4EHCVpysKCMiB3gJgYb4mnTLRUni/AnwHmN3YUL9o8ZKVhRzqfHXPHT3WiqqGUEJZ7bLXUOBJUK3v/K/fSxiUVE66LvtBPtFz9Z0EnJKvSU+ZPNLO4fXAC40N9Sd6tBxHxNqbahC7xyHiXfsx4h3ZTp0KDNjYi4DBSY9AOD/jUS5SFNY4adIIu6dNBNY1NtRf6MGSnLKIFFutRPdBK+d+wfXVBAQ4oEcgzM/XhNOnjqK4SMvl1ArgwQKMaLwy7TNm33qs/fgUkh0ZEFAQ9AiEufma8CMz65ycXoSUKSsIYu1NU4APpz8iq0CoRoqsBAQUBCri/sqLC2zU8DKmTBzmdJjJjQ31ZW6sxwWyuEazCgQQLSEgoCBQyaMxsf6MCSiK4yDE7yxestJyWKBXxNqbFKSwalqy7xgAiQwNtg25Mwa4CXgGOADsAr6HuK4DbBLCoxTnvlSWF3PadMeKyJOLl6z8vhvrcYFTyZq5aGDhe1mFFKB51I1FeYFWWngxVHo0Mg64DbiCI4261UjdzxOAT2qlta4XvHVKx46/+r2EtKjkKR13/mnjCIcdC+133ViLSyzKeoRFFQEpnhJgAT0aqdSjkR8Dm5EtW7pgukso8DiPQkRFQpY9paRI45zTxrox1PFuDOKUWHuTiqW9v2WBENRYt4AejVwCvInk3BRZOOXrejTySW9XNbhQyUNV4DNnjaW0JGV2o10muzGIC5zNkeXXU2MaVscbB5yc+3IGN3o0MlSPRu4D/koyTNwGv9SjEduBL0crKlKcxFPmzbb7GaaltkA8DJY8A6Z1gQBwUW5LGdzo0chZwAbEVpALI4CfuLeiwU0Ij/s7jhxWxqgRQ9wccjjSIcoXYu1NGvAJK8ea1m0IIOXVfpDLmgYjejSiATcjHgSHxiflSjPR8YISGlKM9AWpBHYDfwRecDb24CKEvDmuM/eUUSyYewy1I8pQ4p2gaKCFMRXH8idj3nQeOAspcmIB8wBSvdoKHwFKgK6cVjWISKr4v8NBSL2iqKCVomolKGoYE+WnKQ67EbgdKRmYyHWuwYSKDcuXVc6eVcu1l36IsTVDCGkKimmgGHGUeCeK9SIi6fD7B2PHSPWWjWNLEaFwVKNHI7OAl8hJGCgoWila8XDUkhrUcCWoRZjpa+SrwBJgJdKf9KhHBSwl8NvhgtPT29uURDeKYakgaTqyphF6RdK7YGm7kOQ5m1Mc1X0b9GjkKqQx0Dg75ylKCDVciVYyCrWoGlQrDogjmI9sHU6we+JgI4QH+/HyssweBcWIYao51XGNA3tzOdEl5mIjzFtVQ08gaqlVzkz3RHTrvTaGcYewltydxdoBMIq86amTtBfcjs3SeYpahBoqB82VQM+JSMu9hRRwkJjXqHjQY3FbUxalw7Blfe/NpsVLVuZ8sgvYCSB6VwmVvmRz/FMRO8JRgx6NlAMPYkMYyLZgBGrxcLeEQQ9VwN85ikvlq8AOtwd9ePVOjAwWdjP3fIbncz3RJS61cew/EG3GjtGkGJhpa0UDGD0a6ekdaknQKloZWsnI5LbAlbiWVISARsTjM9CqfztGBba7Pejb77ew/G9b0Y3UQqErkbOn4c85L8ohsfamiUiXKav8CUlm2GVzqkKr9+AJejQyDbGxTM92rBoqS9oHqkDJW0uLbyKejqMq8SwEvO/FwGs37GHrzjYu/Egdk46tpLK8iD37ojz23C7Wvba3q66m/MUzZ43ddtapYwxNU2qRCLQaoJwj1ebdSGDKXYuXrPynF2u1iB3tYC9y5QPJvzjWxrkZ6isMDvRo5DxEuGd0IStaKWq4QlzW/nAFEpF6KZJJOegJIT82T4g0d3LXXzeneqpk5+62M+97eOOZ9z28MYIYcf6I/IjeSVZaHrJ4yUrXPSAOsOMBeLCovK7HlbIZOMfGuYN6y6BHI58GlpMhF0HRSlBDFaAWRIOrs5DU6gvx6OJZSIQQX3kn4FdIcC3wueQN4ODiJSvfRpJYNiFbml3AHqAJH9yOsfamMBk8ACl4oNf9jTanm4R8Fkd4fx7hsC3VBFI1joul2PHGMPsFmiToH3yiA313eIZy5LlfyrRqC+jRyA1IGHHKPaOiFotG4J19IFemIr03LsLDC2ghEEK+CxuA031eSw/VwJzkLRVtiGB4B3gd0SrW4G0486nIVsYKTcCTvf5/3eZcKvIFPMJDsVnJg3PFIxOaHo0owK1IGHL/adXwoSCiAqYWWA1cDjzm81o8o0cne4rCEQjZqECMe1M43IeyE3EX/YzDe3c3OdvGscuLyut6h8G+hBgX7VhS+wmEQmDFMvvlHxctukcDfkWK9nWKoolGoHneW9gtKpDv2b8g255BR8+X9B++rsI5ZUgG4mrkh3SBy+PPsnicCdzV57EW7G8b8lLFymsWLbqnGDEeHiEMFEVNRhaOHEjCoIcwcDdptJ2BTo+G8BywE/u55oXITOCfwArgehyEZt8ZP6gAk2dp4dlRE7oVhRBQhskoQ6fONPpe9lcVlddtSTHUSuAkG1NPyHXNBUARULNo0T37kPoF5/V+Ug2VoYQqQFHdT6LJHwrQgPxevopsuwcFPQLBAH6NZH0NFq5Cio7UAx9YPenO+MFSxHh0SfLviPWh1HtbzRTBMEOPUye1D36ZZti/Ya+z9kAUzGOB/0Te9/K1a+ftmTt3bY2myW9F0UqSLsSC8By4xXWIW/Iz+JiS7ya9P51fI2pQQVt2bDIdeByxj7RnOnDa0jkzkb3hIiSENSu6ohDRQkS0EOWm0d2pqNEvpz50NWIEnWRx3aMsHlcIVCMGw8X0+u5s3z6+Jhot5eyzV1MypMTtEONC4hLEiHwx/ubZuEJvjTcC5D+DxntOBn6e6olpS+cMm7Z0zlenLZ2zHrE9fBmLwqAv7YpabMBDd8YPrrkzfrCvi9JErp5W8bvmgxVU5P3ajKjN/S4ke/fW8PjjF9DVPRBejiPmILEKE/1eiFOURVcfcU0bDbyNR0VTfMQEzgCeveTmueH3FeN8pPuylz0RVgJLrg9XdyEGz8sBqw1rW5Ar7yHujFvqFekplcsPNQg/C4knmGHlvOrqdhZ8dD3FJamiJ/KHmehEUcNexjl8gORlvOjVBF7Td0O3G/gucEf+l+IpyujhpT+df/2MLW8q+gX0+bG5TbmicaxSVH+iGq7PdQhXF+Qe44DvIyG9lqMWDh4s5/FHZrLgovWEi/wpTGQmOjDirSihclTvBMIoxIX/acQ9OeBIZeH5CWIZHlRFP/e2dM96LR6fpRV5U0KyXNGYoBRxglrECOfdqaJurMktKpcvHAr8B/B1pLKTbfbvq0wKhZfQQvk1yhvxNsxE0oSkd0JoCDgv5ZeOIYh35ToKqA+pVVIJBBNRcR9lEJX00hMG7bs7qBrnzn5WAarVEBMoYooWZqi7YX4ZDaD5onL5wuHADcC/4oJW1by3mnVrT+CMs+0Gb+aMacZbFDPR2esBAyPeKinU3qEhRvqxiMY9YDys6XxAnUhX4l+RtaHpwKHrQLcjgaChMFINc5wSZooaotS7dPltXg1shcrlC09BrnBXI1c819i2tZaqqk5OnrHVzWFTEUXvutlIdP6o7xOmHsVMhFFCrr60VNyMCIUvYa8uhm9kcgp3Ij7lhxAr/UByhaVEj9lXVYtRGa2GOV4Jc7yqEcpPzYz1Ho5diXxBv4hcuS6qXL7wPSTtegFSRHaah/Oz4eWJVFZ3cOyE3V5N0QxcjFbyHGLM7Vdjwoi3oiUrM3vM55E8iE9RIJpfJqxEifwRWIVoC3ZqAhQcoeIQoVAIRVXRNO3Q365olERcBLiKQrUaYiwhJqlhRnm310zL/yXaF7aYieGIK2sNkvnpKLvJfPKMT8Vq9t5VNHlrsRJKHLKqxQ9UvWoqpqKYSl6zXdetncrw4W2UV7qevLoFSVXuiRj9b+APqQ7UYwdRwyZKyPOXfgESi/Ix7BfMySt93Y4Zj0WMSj9A4rkHHCfcMJthE/rvHU3DZERnNxMJM1HVCPtYOetlI846vd+PpA0RCq8h2ZNvI6Hm75M+Qm4k0vrudOB8TOVcFDPlC9NXz2Xoe6703rTF8BEtXHDxC6iqa1vs55AAoeaeB/RoJARsJUMlZyU0RLItvWc78FHgjXxMlgt24khNRNq+iZQHK1TXWEoUVaFidOolK6pCWXEpU3ze5e0wdZ7XU/6+KxC1N1V5tVZEKPScWIZ8Nke+WCX9j8446S3wQSDsa67ijQ3HccpMV+wJvwe+QB8PjVZam0h2i/6fdCeaiQ4MI45aNNRL7wOIUFqLbGOe8HKiXMnl1T+KuCVbXF6Lp5SMrSRcml7+7Qib7Fb90wzeNXX+nmjHsG+QrkQCyo5L3kZjU1iHhx2kbZQ/UbevvzqB1oOOri0mYrxbRHp37W/ppTWkHMSIYXTvBb3byVqsUIUk313j9US5kKs4fB6xQA8Yhk8fnfWYteEcfo4usE6P8UiiDd1H71TXcf5UBzMMleeftVO79gjaESPorWRw7Wmlte3AD7MNZpoGemw/ZrwFBXuNOW0SRoTU7RRYZWcn+tFDDJDcByWsUvvh7P1VOjV4KY/JeK0Y3K938LLR6bujOjx+J6bqT8uL3ZFh7Nxu24m1GdlCWa3EfSdShi8rRqITvWuvgpnwuuz/fyKVnQumF4fTDdPtrqzCY4bNrqO43FoS51thkzbnkYYZMRCt4HfxNvY673XpCmpRjLbRlrPEXWfD+omYqW2eqXgYmI3YsyyhldZ2YuP7apo6etfeg4iHIGWlYJe4AsmWLAi3vlOBsBGx4BYsapHGhPOOs3y8qcCqIu+u1xuNBHcn2njZ6PR1i5CK7mMivs194EAFu3aOyHZYAvgWkpSWS7ZXI/b6kJyvRyObkOI215PFDuGAuYiH5BSPxreMGyZVL6WnY2rmT6Ckyl5C437N5B2XWwFsMhIsT7TzlN5O1CzMAjtanSWN2jM2vZnR09EEzF+xbMEPyDEUWCut7cJeGrqKVAOPAb9AStt9D29yTSYgcSeXeTC2ZdwQCH63Z09LyTEVTDh3fE7nri8yU5Y1t4MBbDDi3J1o4wm9nTbTn0w/q4SqWomV+ZdXFdk1jGhnSuH9IDB9xbIFbhTQvQ976clXJ6tGg2gl30YK/P4G98ORy5ES/t/FJ2OjGwJhqAtjuI5apDHpypNQtdxeYkKBNaHcVPp2TJ7Wu1kWb+UZvYOOAtUIUtExyiutODumqbLj/SO20h3A4hXLFnxixbIFrixMK601sdeReyJSS6M325HQ78lIUV03Jb0CLEUEQ95jfdwQCNY36Hlk3CemUFnrLLOxKYzl2AQT2RY8oHewPN7Cm0aUmLNoY19IDN/n6/yRpmE9d1cDM1YsW/Brt+fQSmvXAvfbOOWqNI9vQypKT0bciG5qDJchW4i8Ftx1KhCqkGyugqL6w7WMmVPnylhPhzOb/vaaBk/oXSyLt/KE3s4eI15gpkJ7KMP9bWHY3FxlICXZzlmxbIGX9qkbsZ5stFCPRjK5Bt9FoiSPRyIi3Sq4egrwAvZaAeZCObJNuUg7edqpTgY6FXkjCgZFUzjxCzMyRiXaQVcVukyFMb0u9i0YrNdjPGVEecXootlMFJzHIFfU4hglb0z1bf54PGS89srEi197ZWLaN3SaC6HOariizUy0m/QpE5+GEuANNVyRzc3ZAjyCeDO6kXqeTtMpy5AozFZEOLjN8Yjb85PAHKcagp1eA3mhZEwVpUPdjfN4J2yyDYNVejfLE+3cG2/lVSNK+wCyDVhFCSfo9tGwiBQXyVdNzzuw3kTnChvjNiPh1MciBWZS9eqwQxipZPZn3C3/Nx+JOu65AoxxKhAKrsNQqNqDKvIKPBVO8IYRpc1MDBJdID2xct/T9vPiudJKa2NI+XgrH+mFejRiV1C1I7VEJgMfR+otOuFS4GWsdxJLh4JUwVoJDOv1eIdTgWC1z0DeiLV20d3l/vdJ1wefNpCOeEXeG2z3ppnUza09QSutfQa4x8KhxUiWYi4YSKj/fKRS9d3IliIXeuIVvoVoU3YZjyRX/YT+2c5bnAqE4x2e7zqxXR10dUTpaGsjkXDuDTIMg2hHB7Fuz7PgCgbDXw1hnQ9zWi2G+l09GhnvcK4NSBWl8cAt2Ogq1osiJEDqGaxv20chodsbkW5mqXjGqUBIW3TCL8xuneaN+w/9kDvb24nH7XuDDMOgKxql0yXBMpAww76+3gd8mNNqybpxwKt6NPJtPRpxupffjcQbHIu4LjfkMMYc4FVgGdJSri/VyFZlBfAeEqWZycj5FycCoSx5Kzg+eLoJIyFuAV3X6erspL21la5olHg8nlb913WdeCxGtKODjrY24rHYoLcXpCTsW8LVLuzFB7iFHdW7ErgN2K1HIw/o0cgVejQyLNtJGehCgptmIA1w7sdePIOKePreAx5Lnv8kYsjcj0R5fpbs3o5XgWec+OYKUhgA6Ae62LlmF+POOdwz1TRN4rEY8djh7amiKCiKgmmamJ6mvw8wQr5pCF/Fn1D4XGJpemwKlwO6Ho2sR4oHrQSe10prc3kT1yRvdYixczFS8MYKYay5UFNhIs2ITacaQsFyYO0uWnZk7gRvmiaGYQTCoC/W05Dd5FbgL35MjNSfdIKGqO/fQUqkNevRyH16NHK5Ho3kEofQxOHtxJVIJqRXJJBaqU+As0jFwja7Gybb/7SFeOfRtf93hVhea+jGkKvTzfmctA9uF4KoQuIWHgB26tHITXo0kos/PIYUUJmL1H+4F3c9MM8mxz1Ub9KJQPDdWZ0NoyXGu3/ZOoD65qTFJI81LJWuvBXweROpCu13L9FtuBdu3JdhQAPQr2GMTV5EbAHjk+M5SfbqqStxBvBK7yec2BB8dVZbpWvLQXasbmLsPHdyG1wkiqiGkeRtd/IWAfYiH/ie5P3e7/UoxN07J3lbgMsZp6F9niewNiMqcSPuZgrmhFZaG9ejkccQi7xXuLXFjiBbk+8jxsQbESFhlTbE7vFYqiedCIQE8gW2avTwjf1P79S10tAPj5ldMx5Rv47Fu3zzDuSHvAdRRXcg79NO5MNsQqzpuWYRfZC8PZv8P4wkv3wGiUd3ljJrqAxpHu5oiAy8C/wM8fsXmob5S9wVCDryub+GWPrvdnFskO/Zz5B1X4tsuVK5HntzALmApHWz2mnUkoplFFhyUwaeQ4QB05bOGYIUuZgC1CBCbRQixauQrZTGYTuJiRTH6EYkbGvy/w+QK/he5MP/AO9UTyuUI63IryX5Wu3Svel4Rr4w08016Yjl/TdItJ5j29NV1z7qdIh+JIug3IsIVhBvxzrgaSSpaBv93YGV9HdZtiTP3Z2jpyFXShGt4Wtpnm9GhMEraZ4HnAuEMUhAhWeXFJcZTZbKu9OWzsnTUjznROTLvRCLOSexXTVUrz6dkHOjYjsSt/8Q0hrd1aYPXggEOCQUZiFCa1OyMOtA4ztIBGRv3kc6RmUtSus0R3gnUpX2YeRKW8i8jgRqHC28CSxJ3qYgQS8zkWi7kYi206x3lHUnttd1D3nnuKGVLVWTkII3dr4XceAdpD3Zi8hV9UUGSLfj3iSrKdkpr1aI3IoUPl6KGDQfBr6JRaHsRtGA9cB0JLb6Sgqv7+MWJG30R1j4kvbeJwwiNiVv/dCGdKJN3Uxi6mZagcrlC4uQBJrRSIBMOfKZliPbJB1RP/chpcR2MijfsgHN75I327jVlmQ3krDxbeA6RE3NuR1PjhjIj38Dsk/akLzZ6jn+FTNEHKmL2IpCOyYdCrSZEMUkqsjfGBDDHHS/hNar748hzWTf7vtc5fKF+V9QQF5xu09RBFFVliLhoOciaurU5M2J768bUXv2JOd5P3nbipSC34xLYa9hYChK0pen9IpjUPrFNPQIjxYUOjBpU6DDhM6k8OgaxMIjYPDhZeOyHYir5e5ejxUBI5A97EgOq6MKMAQxRhkcDsI5gFj191CgzWXtCo+2XppHex/h0aN5xAPhEeAT/w9mjaeEg0egZQAAAABJRU5ErkJggg=="},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAABKCAYAAAAohcEoAAALaklEQVR4nO2db2wT5x3Hv+dzEsdO5oR0GqEEpEDUMG2rprVkUkvCn1bjBRLqhiJB3yFgqiqtAzSpVde+mKpR1qxN/2ib+BOBqrS0L0qiSGgrDWCEAtiZ6KutDELwsoRIiZz/diC+59mLu7MfX5zgnM++S/z7SI9sWQT9fvd7vn7uzvf8vhLMIwmvUprPCWfADe95ms+JHLBUIUiG4dKG+BnhPLgwmOGVc85JaCaRpIWnfKZiMIpJ/vLLL1c3NTXtLC8vf97tdv9QluV1LperDEBx1hETVvKIMTatKMp/4/H4v6ampq719PR8/dJLLw0BUKCKjIFEZopsxaWLSgYgf/fdd03r168/7PF4tgNwWxMikWeU2dnZ7nA4/EF9ff1VAHFoQiOBLQ2z4hJXK3cgEKjbvHnznz0ez4sWx0fYyOzs7MVgMHi0qanpDlSR0Sq2BMyISxeWDKBocHBwb3V19QeSJJXnID7CZjjnU8PDw0fWrFnzGYA5qKsYCSwDliouXVhuAEWRSOT3lZWVr+coNsJBjI2Nvbtq1ap3oAosDhLYY1lMXK50/x7aijU6OvoGCatwqKysfH10dPRNAEVQ5wDd/c0Co7j0a6yicDi8r6qq6k0bYiJspKqq6o1wOLwPqsBc0mJfzcSiiOJK3Lzo6uqqq6mped+mmAibqampeb+rq6sO6qUBCcwk4kFzQT2YJTMzM195vd4XbIqJcADRaPQbn8/3SwAPAcQ558zumJxIJtdcid+yent7G0lYhNfrfeHWrVuNUK+9aPUygVFcRfX19a/ZGA/hIOrq6n4D7doLdHNjyYjikltbW6t9Pt82OwMinIPP59ve2tpaDbpzaArxoVt59+7dvwA90kQkcWtzQgYg0anh0nAJr3JlZeVzdgZDOI/KysrnoV132R3LckNfuVwAXB6Pp97meAiH4fF4nkLq1iIiQ8TTQpfb7a6xOR7CYRQVFdUgdZ4QGSLe0JBcLpfPzmAI5yFJUhlIWKYwPqFBB5BIB80LE6RcpDLGZuwKhHAmNCfMI4qLz83NDdgWCeFI5ubm/gdqZmMKXVwcAI9Go/+xMxjCeUSj0dtI7RpFZIgLQleg4eHh6zbHQziM4eHhGxA6RdkczrJCFxcDwNrb27s554rNMREOgXOutLe3fwOhQ5TNIS0rxC39JQB84+Pjn/v9fnq+kMDExMTlioqKvQBmkNx6QgITeNyWE33lUgDEr1+//tc8xUU4HG0uUNs1k+iy0zdKeqCuXp/5/f6ttkVF2M7ExERAWLVmQRsm05LJZkl99YoDeNTW1vY2/b5RuDDGZtra2t4C8AhCL0N7o1p+pN3mD8AXCoX2PvPMM9RHowDp7e098uyzz36O1GstWrXSkGnfwsRuZGinh319fb+rra2lnckFRH9//0e1tbV/QvJ0cA50vbUgmfYtTDk1BBDbsGFDS39//0e5DY9wCpqw3gMQg3BKSMIyh3EDnC6wOainA7Ha2tr3gsHgUcZYNO/REXmBMRYNBoNHBWE9BK1YWZNudymHeut1DuppQbShoeGLlpaWXePj44G8RkfknPHx8astLS27GhoavgAQRfJUUAHdxMiKjIwYoHpueQCUdHR0PNfY2HiooqJiiyRJtPV7ecIikci17u7uU83NzT1QBfUQ6qmgLqyl3sBI62DpxJVP6AWy2DarjHKwxEIISZEVAyg+dOjQ6oMHD+6oqanZXFZWVldSUrJGluUySZKowY2D4JzHFUWZjsViwxMTE339/f3/PH369NWzZ88+gComfeii0lcsM6JwrIOlJihxTouvRh2IOYjPVc7LwUrzOzeSQtPfy0g2MCmEDZdikWQA8p49e77/6quvbtm4cePP/H7/htLS0mpZln2SJBXZG2pecaSDpSCqdK6oW9xu9ybdFZVzDs75tKIo4Xg8/u+pqalrgUDg783NzcML5ZAT21akikofS/k/lxvi0ywyAHdnZ+fPGxsbf+33+7dIkiTbGJtTsdXBUhNWol63b99uWrdu3W89Hs8O7bNMmJudnb0UDodb6+vrA0iu7oxzzq3sNicGK16LlQLwAvCt0FEGoBxABYCqtra2hqmpqW5OZEwsFvs6EAj8WJsvbm0eSVxdLSwdSL2c8Vy9evUnsVjsawty+Mfly5d/ZMzBjJAeh7iaiSuZewWOYqhfIN/r7+8/xBibzLZQhQhjbHJoaOgA1C/iRJtsnhthFQHwDg0NHWCMTVuZw+Dg4H5jDmZFtChWHhinDaFQxQB8kUjkmFVFKmQikcgxqGcExVYKLJ/1EnLIncCsOChOHUh+A/pGR0ffsbA2Bc/o6OgfxcnJra/Xu7nOYWRk5A8GgZG4MhlIbiL1hsPhg1YWhVAJh8MHoZ5euZHl6mWo16E8pcDu379/QMyBxJVZoWQAnq6urqcZY1OWloTgnHPOGJvq6up6GuoNAtmswMR6Xbhw4adWXmNlkMOkMQddG1krTUtuRaE9eUIum3nACgdLsV7RaLSjtLR0u9VxLkY0Gr3o8/l+BS0HaE+30ONLBsTfRshlM/dk62Ap1Mv97bffNuVbWADg9XpfDIVCW5D6MAWJKw3ksplnsnSwTIhL+39sYdOmTfNyIHHNh1w280yWDpYSAPnjjz9e4/V6bauX1+vd8cknn6yGkAOJS0B4Do1cNvOLKQdL8RR+165dO2FjvSRJcu/cuTORAwDaMpIGctm0gSwcLCU4pF5PPPHEcxByIHGlQi6bNmHSwVKs11O5ii1TjDmQuFIhl02bMOlgmaiX9ve24na710HIgcQ1H3LZtIEsHCwlqLfwy62PamlocyaRA4krPYWw6dOJrIRjnsiBxLUA1HE4v2R7vBlj01bFkkUMKTmQuNJDLpt5JlsHS+3vbeXRo0cDEHIgcc2HXDZtIAsHSw6AaX9vK7FY7A6EHEhcqZDLpk2YdLBM1GtkZORGrmLLlAcPHvRAyIHElQq5bNoAN+9gmajXuXPnLtpZL8658umnn16CkANtORHQHqchl808Y9bB0livycnJc+Xl5VtzGuwCTExMdFdUVLyMpIGFQiuXgFZQctnMM2YdLI31unHjxl9yF+Xi9PT0/A2pbcBp5TIibLwjl808kK2DZZp6nfP7/Y25iTY92sorrlpxAIxWrvmQy2aesMjBMqVeZ86ceSufjjyMsZlTp069jWRLcOtcODPpcbDcBpLtucoBrA6FQoez6bNApCcUCh0GsFo7zsUw2QXKWK/e3t4j+cohGAy+BuAHYg6WCGsFiyvR8ARql90n+/r6Wi2tSoFz7969DwE8qR1fyxrU6PW6f//+R7nO4e7duy3pciBxZVYwN9S2WasArL13796HVhanUNGEtVY7rpa3VhPqlTOBLZSDZcJayeLiPLXJJIAqAGtv3rx5RFGUGQvrVDAoijJz8+bNI9qkrEIOm4Lq9QoGg0etrJeiKNML5WCpsApAXCntkaF+Sz15/PjxbWNjY1esKlghMDY2Fjh+/Pg2qKdRq5CHdtaGegUsyOHKsWPHti6UA4nLfMGKoC7/FVAvwtd3dHTsi0QiVxhjSraFW6EokUjkSkdHxz4A67XjVoE8GjGI9ers7Hx5qfVijMUjkcjl8+fP710sh3TaoN+5MsBgoEYum2ngmoPlw4cPh6anp+8MDAyE2tvbL7W2tg5hvoNl4rY7z8EEely9Xnnller9+/fr9dqo1wsAtBwGp6en7w4MDARPnjzZfeLEieHFcsACt95JXEvAaKYGctkUEa1OdYO4uDbmhPe2md9h8XqJLJSDaG37WPM7EtcSSWcDChScy2Y69InAhKEIwzG2rZhfL/GL0OiHvGgOORVXAfM4A+tCPLaLGo7DqicXzGHWcNx0DoU4AXKBJLxKaT4vBLjhPU/zuVNYqF4iWefwf2DhmaNJnAWoAAAAAElFTkSuQmCC"},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAABKCAYAAADNGwREAAAHnklEQVR4nO2db2gTZxzHv3eX2NikpLEMrJAVYsvK3k7bgdpuzrG9ENShMn1v90LYmDJQ3PZqjDE7Db4ZjBnwRRR9MZS+2+xGO9eO2OG74SYSMqfLi9ImtE1bk9ztxd3ZJ9c0ufy5e56S3weOhNLmftBvf33uuef5nIT6kZhXqczXCTHQLO81ANA0TSv/7e4iSfXHpdaflCyHbBzs1wjx0JhDtbxqPIPsRnitYVVu3bq1fXh4+N2Ojo69Ho/nVUVRXpZlOQBgS93VEE7wXFXVxWKx+E+hUPhzYWHh3tTU1I9Hjhx5BqAIPcQqOIXY6fCaoVUAKA8fPhzu6en52Ofz7QfgqfvMBE+KKysr46lU6nJ/f/8kgAKMILsdYKfCy3Zbz8TERN/AwMA3Pp/v7brPRgjHysrKT4lE4uzw8PAj6CF2tQs7EV4zuAoA79OnT090d3dfliSpo+4zEcKiadpCOp0+s2PHjusA8tC7sCsBbnZ4zeB6AHjn5uY+DYVC5+o+A7FpmJ+f/2rbtm1fQA9wAS4EuJHwyuU+D0bHnZ2dPU/BbR1CodC52dnZCwC80DMg9OyRNbzmGNebSqVOdnV1XeBQE8GRrq6u86lU6iT0AMtSI63RYdjwvrg4Gxsb6wuHw5c41URwJhwOXxobG+uDPnQUNsBsUTL0YtuWlpZ+aG9vP8CpJkIAcrncXb/f/x6AVQAFTdNUJ87TjDHvi7ncmZmZIQou0d7efuDBgwdD0Me+QnZfa3i9/f39H3GshxCIvr6+D2GMfSHgxRsbXiUajXb7/f43eRZEiIPf798fjUa7IejMA7uoRjl06NA7oFu+xBoeIxMKAEm0oYPMvCqhUGgPz2II8QiFQnthjHt512LF7LwyANnn8/VzrocQDJ/P9wpKl74KAztskD0eT5hzPYRgeL3eMEpzIgzsBZsky7KfZzGEeEiSFICAwQXW32ETrkBCCITMRckgXFXVJV6FEGIicibY8Gr5fP4Jt0oIIcnn8/+idBOnMJjh1QBouVzub57FEOKRy+X+ArPrWCRkMLtK0+n0NOd6CMFIp9O/g9lpzLmcEszwqgDUeDw+rmlakXNNhCBomlaMx+N3weww5lxSCeyWnzYA/kwmcyMYDNL6BgLZbPaXzs7OEwCWsLY0sqkBbnRJpNl5iwAK09PT3zapLmKTY2SB27b4apixNxei+6B33+vBYPANblUR3MlmsxNM112BQwvSm7EY3ey+BQDPY7HY5yLP7xHOoqrqUiwW+wzAczAuB75VrafsNiAA/vv375/YtWsX7WNrQWZmZs7s3r37BkrHusJtA7LaHWXoK+d9APyPHz/+JBKJ0M6KFiKZTF6JRCJfY224kIeD491meRtKhg4Alnfu3DmaTCavNFYesVkwgnsRwDKYIYNoF2om1gXGZoDz0P9dLEcikYuJROKsqqo516sjXEFV1VwikTjLBHcVDnfcZlBudbwGfWokD/3fRm5wcPDm6OjowUwmM+FqdYTjZDKZydHR0YODg4M3AeSwNlQoQsCLNBZboj3ozl0fgLbbt2/vGRoaGuns7NwnSZJwW0MIW6hzc3P3xsfHvz9+/PgU9MCuQh8qmMF14gKtrKUddf6R2FacYi3EWwBsGRkZ2X7q1Km3wuHwQCAQ6Gtra9uhKEpAkiTawCkQmqYVisXi4vLycjqbzT5OJpN/XL16dfLatWv/QQ+reZihNTuuU123oqW9lvPWKpf2YC3I5nsFaxv0WnFBO/tIAwWAcvTo0ZdOnz69r7e397VgMLhz69at3Yqi+CVJ8vItlTu2Le2wEeK6tf4oDa151PKZmx327qQCwHPnzp3Xh4aGPggGg/skSVI41raZ2NDSjioBbuSBKrLltZW6bkmnjcVivceOHfsyEAjs51zXpmYjSzs2CHEjYWvlR1mZ3dabTCbf7+npGSVrfHPYyNKOMgFuOGgCTwM2HcMYQ9Z4FyhnaYclwDTVVRtkjXcJO5Z2Cq9NjK5L1ngXsVraYQkwhdcGTHDJGu8yVks7mADTmNcGxp1EssZzwmpph3H3jzpvFZiuS9Z4Tlgt7TCaLoW3OmSNF4BylnYKb3XIGi8A5SztFN4KMPO6ZI3nT4mlHQAtabQBWeMFwWppp/BWhqzxAmG1tFN4K0PWeIGwWtopvNUha7wgWC3tFF57tNJyT9F58Xug8NqEDEL8sf4OKLz2IGu8AFgt7RTe6pA1XhCslnYKb2XIGi8QVks7hbcyZI0XhHKWdloSWQHj9jBZ4wWgnKWdOm8FDE8XWeMFwGppB3Xe6jAL0ckaz4lylnYAKnXe6pA1niOVLO3UeW3AbgMCWeNdpZylHcY2IAqvDdidwyBrvGtsZGkHzfPah7lwI2u8S2xkaQfdYasdJsBkjXeQSpZ2kDGnIcga7yC1WtppzFsj7L42kDW+Gajz8/O/Tk5Ofnf48OHfoHfaFZQKr0m01yyYAJM1vgZMS/vq6uqzxcXFR0+ePLkfj8d/jkajz7De0u6o4tQsqNGP2LSwQhKQNd4OrM7ffIRAwTjyzHtH5NLrq2nh8ALrujBZ4ytjhkVljiJzOKL1J6pD1nh7uPpAFaJ2WtkaX4mmPsrqf03MwK9N/obZAAAAAElFTkSuQmCC"},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPcAAABmCAYAAAAXtge1AAAIR0lEQVR4nO3dy4/bRAAG8G9sx0sWSoLY3RapEoWqLVAQfdzhRAV/QOE/4MIJzqDCAXrmwI0zEndOVAgQL0FF2wviwPPQU7dSN6y62U1sD4ddbyeTGdu7sceJ/f0kK97Er1j7ecZjjyNeu/wmSiTKXBhRC8myFhQcYFoGl6h6RXJW6ACQF27bivT3GXyicukBVv8WGdPts4XbFFZh+Mw2TkSHJ/EgT2l4hTJuCvpUyE3htpXK6qvpvaxlEFE2W0ltCrRpHqFPo4fbVBLroVYH03SmZRGRXZFgq4Nt/omA51XLTYFmyInKcdBQm0KeVuEzq+WmUKqDZxm3hdy0TCKaJA3jpiAn2rhtGftBt51zm4LtWcbzAk5E+WzBTkMtlHFgOuDqMgBkXwrTg+0B8D567+0zzz1z8konCF4WQjxyyC9CRAVIKTdH4+jb337/4/13P/z4D0yGOh03Xg7zT529CJjPsT19uHrlnWdfPHvmy8D3XxBChBV8FyJSCCGWAt8/fezoyuunTj75xbc/XL9XZDZgN7S2D/Wg+8+efvqKEKJXylYTUWFCiP6555/5AIAP++nwBNOlMNv5ttcJgper2XQiyhOGnZewm0X1nFwPuPFSWF7V3BdCLFe58URkJ4R4FLslt97oluZ14rLYQarltmmJyB31alVmtVwPrH45Sy+9iaheah5NeZ2Y0MR27k1E9cq6gWxqwpTtDjNWy4nmh6nUBgz5NVXL09dCRwcicqpI/w4AD44ARRdGRPUqeou3yKpq24p9IqpPZiOayhRuW+8wIpoPpkxOZTSrtbzIe0TkVuFs5rWAM9BE8yszn3ldPiuTjO4i2riJ+P5fkOMNSBlXubrChPAhOo/Bf/hpBP3z8MKVStYzHA4xGAwwHA4RRVEl66hTEATodrvo9Xrodrt1b06TWXN6kOeWl0PG2LlzDdHGDZT4/PXSSBlDju4iGd3F+N51BP1zWFq7BIhydpWUEuvr6xgMBqUsb15FUYTNzU1sbm6i1+thdXUVQrAi6JLbG1NkjO3bnyPa+BXzGOxpEtHGTWzf/hwoqWbRhmDrBoMB1tfX696M1nEa7p071xBv/eNylaWIt/7Fzp1rMy8nrYq3UXoKQu44C3eys75XFV9M0cYNJDuzlT5tDXaq7d/fNWfhjga3sBhVcRu59x0Ob2trq6RtWUwsud1yFu74/l+uVlWZWb9DHM/HFYG6NPGqwDxzFm453nC1qso04TtQe7gL95xcx55FE74DtQf7aDvk+37dm1CrIHB/W0WbMdwOLS+3+/mSvFPNLYbboV6v3Y98b/v3d43hdqjb7aLf79e9GbXo9/ssuR1juB1bWVlpXQnW6/WwslJNBxyyYwuHY0IIrK2t4ciRI+wVRpViuGvS7Xb5T0+VYrWcqKEYbqKGYriJGorhJmoohpuooRhuooZiuIkaiuEmaiiGm6iheIdaDaIowng8RpIkkHKRnytHeYQQ8DwPnU7HeX92htux0WiE0WhU92aQI1JKxHGMOI4RhiHCMHS2blbLHYqiiMFusdFo5PQhmQy3Q+PxuO5NoJq5PLgz3A61/dHGBCRJ4mxdDDdRQzHcDrX96acEeJ67yDHcDnU6nbo3gWrm8n+A4XYoCAKnl0JovoRh6PRaN69zOxaGITzP400sLcGbWFomCAL++gZVjtVyooZiuIkaiuEmaiiGm6ih2KpTA3b5PLw6W58XDfeOY+zyOZs6u1AuGmfVciEW/9ZL4c32j8Qun+UajUaN/J21srgLd2fxf7pWdGb7dU52+Swf96mds3D7D590tarK+MsnZprfZXe/tuA+tXMW7qB3DoBwtboKCAS983VvBFFhzsLtLa0i6F9wtbrSBf0L8JZWZ1qGy+5+bcF9aud0zyytvQJ/+SmXqyyFv3wCS2uvzLwcdvksH/epndvDnvDx0PE3EPQvYjGq6AJB/zweOv4GUEJrP7t8lst1F8pF437PCB9LR19Fp38R0eAm4vt/Q47vQcr5aBgRXgei04e/fAJB7/zMVXEdu3zOhjexFFfb3vGWVhGuXapr9bVil09yga0RRA3FcBM1FMNN1FBZ4WZLD9H8s+Y0r+RmwInmV2Y+beE2zcSgE9WvcDZN4dYnlLaZiagWpkxOZTTvnFtqfxNRvdRcZha8XtaH2gIYbqL6Se3VOp1ecutHBH0gonplZXMio542kz5BOmMCIJFSblWxtUSUT0q5ib0swn7avP9eVmu5PiTD7Z0fyt5gIipmuL3zPSaDnVmrNlXL9ap5eqRIfvrl1lUp5X8VbDcRZZBSDr7+7uerUPKInMY1/9TZi8Bu5+rc4afrt+4dXX38q2NHV57oBMExIQQ7JxNVSEp5f2u4/fW1b35865NPP/sTQLw3mEI+EW7x2uU3gQdPTvD2xj1l8JUh2BvU99Rp9QMCEeWbOgVWhlgZor1BfU8PefpgBKl3Kja1lid4ENZY+zyBOdwAw01UlPVUGNMBt5XYUyW37YkBpiOJ/pkt2Aw30cHYClU94OprboNaGm6J3TDqTeumZx+lC1NDzVKbaDZ645hazc4arNe7s571k05oKrXVktt0ns1wEx2M7QYyPeT6uPXmMlO4TROnAU9L97SkV8/HTcFmyImy2W5EsYVcH7dWzdVwp4E1rRSYDLKEPdR6oBlwIjM9Y/pdZrZbTbNCvf93VoOaeg6uh5mhJirPYUJumm6C6VKYUMZNG8FgE5WvaMBNnxmXYTvnzqqeq+/x/JqofKbzcHU8K5P7sqrlgDnkptJdv4xGRLPJLJULvJ/7iyPqjFmlOYNN5E6hvB3kN22KLJBVc6LZlFZQ/g97MPg/uikqrAAAAABJRU5ErkJggg=="},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO4AAACZCAYAAAAoyQZbAAAM40lEQVR4nO3dW2wc1R0G8G9mL95dnFAIYDCyqIoCTUNRBVVUtZVQHnmoqJBQEeoLfSAVIFBfeGmJUG8SL1EviCpSqRREVYqoiqiSNlFLIHUghpBQmjhVTOLEIVZ8x/ZeZ2fm9GG9ZDyemZ3dnbPj4/l+0mjX9uzM8X/9+Zy5rnb/Q48hQlqUCyPaYERUC0q3MS9DSdSdMBkKFe5WwfVbkfv7DDVReO5wOr/WAub7nF9wvYKoefzM7zkReRO4mpVmMDXHc68QrwmwV3D9elPno9f3gpZBlGR+PaxXWL1eo7nncQfXqwd1B9Y5ec3ntSyipAoTWufk9/pV4W01VPYKKwNM1Fq7gfUKcHNYHThU9gqcc9J9nvsF2GuZREkiPJ57hdR2Pfdbxuch9tvG9Qqt7vO8VXiJks4vtM3Aao7nwNrwOpcBIPhwkDu0OgD95z9+euv2bVufy2bS92matqnDX4Qo8YQQy0bdfOf0mbHnfvKLX49hdWCbzz0PCaW2br8X8N6m1d3TL5/90Z1f++qX/5lOp+7WNK1Pwu9ClBiapvWlU6k7bh644Xt3bdt64F9Hjs2HeRnQCKTfD90hTm278/bdmqZdG0mriQgAoGnatdvuvH03gBT8Nz9X8Toc5Ld9q2cz6fvkNJ0o2bKZ9E40cubcBnaH1/NwUKvhcorbtERyaJp2DRo9rnsHVjOLqw4NtTNU9puXiKLhPGITOFR2h9F9SMfd6xKRPM6seWVx1Yxe/LZ1iUieoBOb1szY5HfmE4fKRL3h1dsCHtn0Gio3H0Mln4giE+ZaAABX091qYWteSESRC5s1LWj4G7hxTESRC505r+D6XSVERPJ55W1N/oL2Kof5HhFFJ3TuWu0pZliJ4hGYvVbbuEQUn7a2cYlonWNwiRTE4BIpiMElUhCDS6QgBpdIQe18Wh85lMtlFItFlMtlmKYJISL7BMUNTdM0pNNpFAoF9Pf3o1AoxN0kJTG4bTIMA9PT06hUKnE3RUlCCNTrdSwuLmJxcRH5fB433XQTstls3E1TCofKbahUKrh06RJDGyHWtDMMbkiGYWBychK27XWTeeqGbduYnJyEYRhxN0UZDG5IU1NTDK1Etm1jamoq7mYog8ENoVwuo1qtxt2MDa9araJcLsfdDCUwuCEUi8W4m5AYrHU4DG4I7AV6h7UOh8ENwTTNuJuQGKx1OAxuCJrGS5NpfWFwQ0ineZ5Kr7DW4TC4IfT18aOAeyWXy8XdBCUwuCFs3rw57iYkBmsdDoMbQqFQYE/QA7lcjhcdhMTghjQwMABdZ7lk0XUdAwMDcTdDGfxLDCmbzWJwcJDhlUDXdQwODvIKoTbwr7AN+XweQ0NDHDZHKJfLYWhoCPl8Pu6mKIX73tuUzWYxNDTEC+k7pOs60uk08vk8L6TvAoPboUKhwD86ig2HykQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgVJv5BeCAHDMHiXCEoETdOQTqeRzWalfgKG1OBaloVqtcrAUmIIIVCv12GaJnK5HFKplJT1SBsq27bN0FJiCSFQrValfRi6tODW63WGlhKt2fvKIC24/LhEInk5kBZc9rZE8nIgLbj8TFkieTmQFlx+zimRvBxIC24mk2GvS4mmaRoymYyUZUsLrq7ryOVyDC8lkqZpyOVy0j4kTup4NpVKoVAo8MwpSowNceYU0PhF+vr60NfXJ3tVRInBiwyIFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQK4pUAK3hvrPWpV2ciqYbBBe+NtZ716h5Oqkn8UJn3xlKD7Hs4qSbxweW9sdQh8x5Oqkl8cHlvLLXw/WpIfHDZ26qF71dD4oPLPZVq4fvVkPjg8t5YauH71ZD44PLeWOqQeQ8n1SQ+uLw3lhpk38NJNRx3gPfGWs945pQ3BncF741FKuG4g0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUxuEQKYnCJFMTgEimIwSVSEINLpCAGl0hBDC6RghhcIgUp99lBAsD5WeDMFeDCHDBXBKp1wLLjbll3UjqQywBb+oHbtgBfuRn40g3AeviYq8qlGVQ+mYTx6QyshSJEzYBQvOBaSofWl0Xqun5kb70R+a2DyA/dGHezQlMmuEIA718EDp8F5otxtyZ6lg2Uao1pYg7491ng+n5g5x3AjtuAnn9QnRBY/vgClo+dhrWw8QouLBuiXIVdrqJ+eRal988gdV0/Nn1jOzbd/cUYCt4eJYI7VwJeeR+4vBB3S3prvgj85QRwbBz4/g5gyzW9WW/9sxLm3jiK+pX53qxwnbAWivjs7yMonRzDlu9+C5kv9KjgHQjaxl0XHxI7NgP89nDyQut0eaFRg3Oz8tdVmZjG9L5DiQutU/3KPKb3HULl0kzcTfHNYKudU7GG939TwB+OAmUjzlasD2UD+P1woybS1jF+BXN/fht2pSZvJYqwKzXMvXoY5fNX4mpCYPb8guv1op6GeHoZ+OOI+judomTZwCsjjdpEzZhfxvxfh5Xf6RQlYdmYf2MYxryEgvusMuT3PIPrnlH4vVgWWwB/Og7UzF6uVQ2G2aiNHeU7IgTm33wPwmDB3YRhYv7N9xp7R3u0SnhncJVW27jC47l0H1xM9jZtK5cXGnvYo7L88YVEb9O2Ur8yj6X/jPdiVaEzpwf90LEA56NUAo1DPhTs7bPRvSHLx05HtKSNqzgy2ovVhM2acPe47rS7J+nOz27M47RRmy82atWtysTMhjxOGzVroYjKhPS9zEG5W5U/3fUi9wzNF9oAbCGE9Hf4TGw78dQTRa0q5ya7X0hCyKyVEKKMlZxhbUe5JptBe5Xdk12p1oajbrDbhTnZa9g4LkawWWp8GvuxSmUYl+UdSK9Ua0ewOrSBI12vobJ7uNz8L2C/O3LieSHEkoR2f26Oo7bQZiM4SsFhcniWpMNCQoild0dOPA9H1tBiR1XYHtcGYO95cd/ZQ28dfaBUrhwUQpQk/A6o1mUsdWOKolaixrNbwoq6VkKIUqlcOXjoraMP7Hlx31msDa1vj6vd/9BjwNWLUPSV57pjSjmm9Mrk/J5zXs01te2uh/ceB5Dp5LUJVD/16q6vd7OAvffsZL3Dq+86cbjdent2giuT5ZjMlcn5PXcP3Dw7RrgvMvDaq2zjahAt189teAcX6PSKNCGWoGlbOnpt0jQ2W7rqBmwhlnTWOxS7s3r7bnpibXi9hsqePa/f1UFe/yXcP/MLbVfBFbY5rqUy/EMKQdjmeXQZXFPY41ktxXqHYAq7k3r7dYbu8DofWw6Vm8EVaATNvQva68TV5sKcgW0+Al0MkwHAqteOp1OZroZ/SWHVa8fRZXBrlnU8q6dY7xBqltVpvd07mpxD36DJ93hu0PW4zRm9eltnj+u1XdtxcI3S3MF0rv+Hnb4+SYzS3CEAXe2imjGqBzdlsqx3CDNGtdN6+53Y5A6w+3ngKY9eK2l3g7o51R2PdY+ft5wuHN4zDCF6cmKo0oQYn/j3C0fRQY2d06/GPhoWrHdLQojx3537b7v1dubAKw8dbd8C3mdOOb8OE16vALuDHHqyzWrdMkp7QtQy0SyjtMesLhnoMrg126qXTJP1bqFkmnuWTKOdegf97bvz02p43BTqzKnmY9BY3N0Ar93a7fe6R154GQInggqZaAInLxx54WV0Gdrm9JvzH78MCNbblzjZqFFbdQ06zOMV2KCTL9bwu8ig+bxVr+t+tHy+bmuqzI0bteL0DwDwtJ61irXi9KOVuXEDXdTYOV0sLRlT1Qrr7a04Va08erG01Gm9/bLhfAwzRG555lSrIXPQ7uygnritaWz/s6O2WXsEXe413WAM26w9Mrb/2VFEFNrmtHt0ZLRqW6z3akbVth7ZPTrSbb2DshJmmzZwG9c9o1+AbawNcJhd221Po68/dQC29SDYEwBAEbb14OjrTx2AhFoDsJ/+6MgBU9isd0PRFPaDT390JOp6e+059tuL7LtnOczN4oIW2GobuOvp1GuPH4Bt7QDwYYu2bmQfwrZ2nHrtcWmhbU5PnHzngCXsxNfbEvaOJ06+I6verXrXwENBAJDauv3ebn9JJyl3kZ4+vX+279pbX8ptvnkCmrYdwPUy1rMOnYMQzyx+evLJT/7x055df7f/ysXZW3L9L92SK0xoCau3EOKZDz+bffJnZz6QUe/AMLajeZFB7O56eG/YWXUA3wbwHQDfBHA7gOsAZOW0rGcMAAsAzgF4F8DfAAyj8R860KlXd7W9sr337Aw7K+vtsuvEYbktC+H/2YEX+M1NGS8AAAAASUVORK5CYII="},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAACVCAYAAAD1yACcAAAIqklEQVR4nO2dzW8cRRqHfz3jGR9ISOzgxCZryCEBtLvhAMfVBiQICI5ISHBA3Djw8S/sYZcLnFYrRdrr7mG1h91/YK0VUXYFihCRCBIKgYNjb4QJxE7ifHhm7Ok9tDupqamq/qquab/8Hqk07Zmqt9+xnym/Uz3THb3y+jvwSOQzGPnZEfsKNFWgL6UldZPHsVzyZ4lt25F+P6UnPtHlVX+OHP3uYxPbJGpkeMy2TUhZYjxwKRU3UrZNko8JbhLbNhurt6b7XDEIcWGboU0ym8ZEeh9dbNMMrAutNlM/UyxCbOSRWm228SNyZ5UiJpkpOPFBUaFNgqdli7MUMQmptpZl2ya4KSYhKrFh2yTxUNu2xbgvua3GNkndsmxnyU1IFjapU6EjZRsYl1uNAcC93KdL3QLQeuPdP7x4Kzp8Zu0mjvS3KTCpj+kpxPMH8MMB/PDu38787t8YFTrdNi75tXZvbTX1iNRvvvfhy99tHv7HynXMU2pSN71tRFeuY/7yrSP/fOuD378AzUc4qoWWIR4MA1oA2jfiuT9tDSg0CcvWANH68MgZAG3YhR7BtNxnnbXXbuJIPakT4mbtJuaReKjW4LrcxuU+UzmiTvvtwQ5nazIZeknp28b4G8zU1ZGlvyKliK0vIaFw1dZjHVX0IlyftQmZJKY3joBB8LwzduToS0goXAcGxzqm2I4cshQhTcE0WwMGd20fgnJ9JqQ0Ty4Ap44Dj80A00W+4tBgetvAygZw7lvgm7VJZxOGxVng5FHg8H6g03b3HewA1zaBi1eB/61X3nXWZ5VGVkWyhPVymPz0L4HTT1WJ0Eymp4ATc0lbugQsfT3pjOrl2WPAM4v5+3fawNGDSbuwCnyxXGn3eV2MXOWFszgvwpPzMqXWOf1U8l9JKr+YLSa1zjOLyWxfgdxOmsTWO1cuQ06dqDJ6b3Hq+KQzqI+nj1aPcbJ6DJOPY366VkXy3JeLxZmyI/cekp/r3P6Jx8jtZdZKB480FoS/MDcefz/OUFk1thdWN3xFaj4rgp/rj5vVY1zzEEOhUI3tnXPfhdhLM5D8XL+62owYeQgi9jffJ0th0lm6lDxXqayuJ0t2ZbmwmsQIQbDDJEtfJyXJb48Dj88AXSEHaPrbwJWNZKaWLHXKF8tJSfLrR4sdoPnqajipgYBiA8Cl75NG9jYr15PWZPj5DyISik1EQrGJSCg2EQnFJiKh2EQkFJuIhGITkRQ6QPPxa3WlQUg2r/49f1/O2EQkFJuIhGITkVBsIhKKTURCsYlIKDYRCcUmIqHYRCTBvho2WN/ExtmLGCyvYdgfVIrV6nbQOTaPmeefRme23BlY+jvAT7eBO30gtl5qPh9RBDzUBR7ZB3QzvgPIfKrFyksQsfvrm/jxL//CsFdN6JRhf4De5VVcu7KGubdfQreg3P0dYGUdGFb8g6XEMXC7B9ztA4/NFv/jMR//BClFbpy96E1qlWFvgBtnLxYe99Ntf3+0kXziJDbz8ZtPGYKIPViu78TR/eXiX3u/068hkQqxmY9/gohdtaZ2Efe3i4+pYTaqEpv5+IerIkQkFJuIhGITkVBsIhKKTURCsYlIKDYRCcUmIqHYRCQUm4iEYhORUGwiEopNREKxiUgoNhFJELFb3U5tsaMSF4yMarzgeZnYzMc/QcTuHJuvLXb32ELhMQ91a0ikQmzm458gYh987iRa0/5n7dZ0BwefO1l43CP7gFYNM0crSmIzH7/5lNpXiJ10Dz2MubdfwvQTi6VKB52oO4XpJxaTb6gferh4Pu3k29L7pv38a4yiJFbZb2AzH/8EO69Id3Y/Dr/2m1C7y6TbBh49MOksHsB8/MJVESISik1EQrGJSCg2EQnFJiKh2EQkFJuIhGITkVBsIpJgRx6bdoZ85rO38ilKmCsaNOwM+cxnb+VThiClSNPOkM989lY+ZQgidtPOkM98/I9pQmyVIGI37Qz5zMf/mCbEVuGqCBEJxSYiodhEJBSbiIRiE5FQbCISik1EQrGJSCg2EQnFJiKh2EQkFJuIhGITkVBsIhKKTUQSROymnSGf+fgf04TYKkHEbtoZ8pmP/zFNiK0SROymnSGf+eytfErtK8ROmnaGfOazt/IpQ7grGjTsDPnMx03T8ikKV0WISCg2EQnFJiKh2EQkFJuIhGITkVBsIhKKTURCsYlIKDYRCcUmIqHYRCQUm4iEYhORUGwiEopNREKxiUgoNhEJxSYicYkd6Ip8hJTG6mjWjE25SVNxumkT2zSIkpNJk9tLk9h6x9g2mJAJYPJxzM+sGjs2bBMyKXI72XI9qARQbwmZFHldjPUZW3816I2QSeLycsTPljZI75AOHAIYxnF8u45sCckijuO72PUQ4xPtmLuuVRG9De9t9f7rO2FC8nBvq3cOo1I7KwlTKaKXI+mrZPjp+QsfxXF8q4a8CbESx/GtT89f+AiKi8h4I9k+8atnASDK0z77/MuNuUMzSwvzcwudqamFKIoCncab/ByJ4/jO3Xtbn3zyn/Pv//HPf70MYGe3mQQfETt65fV3gERcIJnBo93btLWVNrXb1PvUvvqLgZAsxkpepe0obXu3qffpgg/TmPr5sU2rIkM8EHVHe3wIs9gAxSb5sJa+GJfbNlOPzdi2E7+bXkX6YzapKTYpgm0y1eVWbzPfPKZix0hE1JdQhmMjHgRThU5vAZYhpDj6G0G1tHA163q261IdaUfTbK3O2Ka6mmKTItgODOqC69vWg4YmsU2dU7nTWT2d4dX62yQ1BScubAdZbILr29ZyRBU7ldW0U2BU4hh2oXWZKTcxofulHz20HT53CX3/Z9ebR7Xm1kWm0MQXZQQ39RvBtNwXKdumJCg18U1euU2PGWPYamxXSaLex3qa+MZUd6vbLh/v4ypFALPgplldXyokpArO2TjH/ZlX5lUHumZxSk1Ckcu1IpeczhOQ5QipgrcJ8v8gDV7OqXwwtQAAAABJRU5ErkJggg=="},function(s,a,t){s.exports=t.p+"static/navbar_1.499e088.png"},function(s,a,t){s.exports=t.p+"static/navbar_2.59ecae2.png"},function(s,a,t){s.exports=t.p+"static/navbar_3.8dcec92.png"},function(s,a,t){s.exports=t.p+"static/navbar_0.b608f86.png"},function(s,a){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNjU3MTM3LDAuMjgxNDcyMzggMy42Mzk0OTY1OSwxLjY4NDU3NDkyIDMuNjM5NDk2NTksMy40MTQ5Mzc5MiBMMy42Mzk0OTY1OSwyOC40ODE1OTc0IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEw2LjM5NTIzNzcsNzYuMDExMjgwMyBDOC4xMzU2MjUwOCw3Ni4wMTEyODAzIDkuNTQ2ODU2MTEsNzQuNjA4MTc3OCA5LjU0Njg1NjExLDcyLjg3NzgxNDggTDkuNTQ2ODU2MTEsNDcuODExMTU1MyBDOS41NDY4NTYxMSw0Ni4yNjUwMjEgOC40MjAxMzA2Niw0NC45ODAxNzEyIDYuOTM4NjI2MjgsNDQuNzI0MTA1OSBDNi43NjIwOTg1MSw0NC42OTM1OTQ2IDYuNTgwNTMzNjgsNDQuNjc3Njg5OCA2LjM5NTIzNzcsNDQuNjc3Njg5OCBMMy4yNDM2MTkyOSw0NC42Nzc2ODk4IEMxLjUwMzIzMTkxLDQ0LjY3NzY4OTggMC4wOTIwMDA4NzY0LDQ2LjA4MDc5MjMgMC4wOTIwMDA4NzY0LDQ3LjgxMTE1NTMgTDAuMDkyMDAwODc2NCw3Mi44Nzc4MTQ4IEMwLjA5MjAwMDg3NjQsNzQuNjA4MTc3OCAxLjUwMjg3NDkxLDc2LjAxMTI4MDMgMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEwzLjI0MzYxOTI5LDc2LjAxMTI4MDMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMjBBMEZGIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZGlhbW9uZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuMDAwMDAwLCA0NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNBRkM4RUIiIHBvaW50cz0iMjQuMTc1MzI2NCA4Ljg2MDY5Nzk1IDE3LjE4NTE4NTIgMjguODM1NzAyNSAzNC4zNzAzNzA0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAwIDguODYwNjk3OTUgMTAuMTk1MDQ0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAzNC4zNzAzNzA0IDguODYwNjk3OTUgMjcuMjU5MjYxNiAwLjA0ODE4NDE3OTciPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjQUZDOEVBIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM2NDk2REMiIHBvaW50cz0iMTcuMTg1MTg1MiAwLjA0ODE4NDE3OTcgNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzkzQjhFRSIgcG9pbnRzPSIyNy4yNTkyNjE2IDAuMDQ4MTg0MTc5NyAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAyNC4xNzUzMjY0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iMTAuMTk1MDQ0IDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDI0LjE3NTMyNjQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzY0OTZEQyIgcG9pbnRzPSIwIDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDEwLjE5NTA0NCA4Ljg2MDY5Nzk1Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},function(s,a,t){s.exports=t.p+"static/hamburger.50e4091.png"},function(s,a){s.exports=["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"]},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,a,t){"use strict";function l(s){t(703)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(705),n=t.n(e),r=t(709),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(704);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("78fe78c6",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,'.page-changelog{padding-bottom:100px}.page-changelog .fr:hover a{color:#409eff}.page-changelog .fr{float:right;padding:0}.page-changelog .fr a{display:block;padding:10px 15px;color:#333}.page-changelog .fr.el-button{-ms-transform:translateY(-3px);transform:translateY(-3px)}.page-changelog .heading{font-size:24px;margin-bottom:60px;color:#333}.page-changelog .timeline{padding:0;padding-bottom:10px;position:relative;color:#5e6d82}.page-changelog .timeline>li{position:relative;padding-bottom:15px;list-style:none;line-height:1.8;border:1px solid #ddd;border-radius:4px}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline ul{padding:30px 30px 15px}.page-changelog .timeline ul ul{padding:0;padding-top:5px;padding-left:27px}.page-changelog .timeline ul ul li{padding-left:0;color:#555;word-break:normal}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #333;margin-right:-12px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:16px;list-style:none;padding-left:20px;padding-bottom:5px;color:#333;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:6px;height:6px;border-radius:50%;background-color:#333;-ms-transform:translateX(-20px);transform:translateX(-20px);display:inline-block;vertical-align:middle}.page-changelog .timeline i{padding:0 20px;display:inline-block}.page-changelog .timeline h3{margin:0;padding:15px 30px;border-bottom:1px solid #ddd;font-size:20px;color:#333;font-weight:700}.page-changelog .timeline h3 a{opacity:1;font-size:20px;float:none;margin-left:0;color:#333}.page-changelog .timeline h4{margin:0;margin-bottom:-10px;font-size:18px;padding-left:54px;padding-top:30px;font-weight:700}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;right:30px;font-style:normal;top:23px;font-size:16px;color:#666}',""])},function(s,a,t){"use strict";a.__esModule=!0;var l=t(706),e=function(s){return s&&s.__esModule?s:{default:s}}(l);a.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,a=s.$el.children,t=a[1].querySelector("a");t&&t.remove();for(var l=a[1].textContent.trim(),e='

  • '+l+"

    ",n=a.length,r=2;r

  • '+l+"

    ")}e=e.replace(/#(\d+)/g,'#$1'),e=e.replace(/@(\w+)/g,'@$1'),this.$refs.timeline.innerHTML=e+"
    • ",s.$el.remove()}}},function(s,a,t){s.exports=t(707)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(708),e=t(0),n=e(null,l.a,!1,null,null,null);a.default=n.exports},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"changelog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changelog")]),t("h3",{attrs:{id:"2-2-0-graphite"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.2.0 Graphite")]),t("p",[t("em",[s._v("2018-02-12")])]),t("h4",{attrs:{id:"new-features"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features")]),t("ul",[t("li",[s._v("Menu\n"),t("ul",[t("li",[s._v("Agregados los atributos "),t("code",{pre:!0},[s._v("popper-class")]),s._v(" y "),t("code",{pre:!0},[s._v("disabled")]),s._v(" para SubMenu, #9604 #9771")]),t("li",[s._v("Menu Horizontal ahora soporta SubMenu multi-capas, #9741")])])]),t("li",[s._v("Tree\n"),t("ul",[t("li",[s._v("Agregado el evento "),t("code",{pre:!0},[s._v("node-contextmenu")]),s._v(", #9678")]),t("li",[s._v("Ahora se puede personalizar el template del nodo usando scoped slot, #9686")]),t("li",[s._v("Agregados los metodos "),t("code",{pre:!0},[s._v("getNode")]),s._v(", "),t("code",{pre:!0},[s._v("remove")]),s._v(", "),t("code",{pre:!0},[s._v("append")]),s._v(", "),t("code",{pre:!0},[s._v("insertBefore")]),s._v(", "),t("code",{pre:!0},[s._v("insertAfter")]),s._v(", "),t("code",{pre:!0},[s._v("getCheckedKeys")]),s._v(", "),t("code",{pre:!0},[s._v("getHalfCheckedNodes")]),s._v(", "),t("code",{pre:!0},[s._v("getHalfCheckedKeys")]),s._v(" y el evento "),t("code",{pre:!0},[s._v("check")]),s._v(", #9718 #9730")])])]),t("li",[s._v("Transfer\n"),t("ul",[t("li",[s._v("Agregado el metodo "),t("code",{pre:!0},[s._v("clearQuery")]),s._v(", #9753")])])]),t("li",[s._v("Select\n"),t("ul",[t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("popper-append-to-body")]),s._v(", #9782")])])])]),t("h4",{attrs:{id:"bug-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),t("ul",[t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Corregido el icono de expansión de una fila expandible que al hacer click activaba el evento "),t("code",{pre:!0},[s._v("row-click")]),s._v(", #9654")]),t("li",[s._v("Corregido el layout que no se actualizaba cuando el ancho de columna era cambiado por el usuario arrastrando, #9668")]),t("li",[s._v("Corregido problema de estilo cuando la fila de resumen coexistia con columnas fijas, #9667")])])]),t("li",[s._v("Container\n"),t("ul",[t("li",[s._v("Corregido componentes del Container que no se estiraban en IE11, #9655")])])]),t("li",[s._v("Loading\n"),t("ul",[t("li",[s._v("Corregido Loading no se mostraba cuando el valor de "),t("code",{pre:!0},[s._v("v-loading")]),s._v(" era cambiado a true en el "),t("code",{pre:!0},[s._v("hook")]),t("code",{pre:!0},[s._v("mounted")]),s._v(", #9722")])])]),t("li",[s._v("Switch\n"),t("ul",[t("li",[t("p",[s._v("Corregido se disparaban los dos eventos nativos de click cuando se hacia click en el Switch, #9760")]),t("p",[s._v("​")])])])])]),t("h3",{attrs:{id:"2-1-0-charcoal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.1.0 Charcoal")]),t("p",[t("em",[s._v("2018-01-31")])]),t("h4",{attrs:{id:"new-features-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features")]),t("ul",[t("li",[s._v("Cascader\n"),t("ul",[t("li",[s._v("Agregados los eventos "),t("code",{pre:!0},[s._v("focus")]),s._v(" y "),t("code",{pre:!0},[s._v("blur")]),s._v(", #9184 (by @viewweiwu)")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("El "),t("code",{pre:!0},[s._v("filter-method")]),s._v(" ahora tiene un tercer parámetro "),t("code",{pre:!0},[s._v("column")]),s._v(", #9196 (by @liyanlong)")])])]),t("li",[s._v("DatePicker\n"),t("ul",[t("li",[s._v("Agregados los atributos "),t("code",{pre:!0},[s._v("prefix-icon")]),s._v(" y "),t("code",{pre:!0},[s._v("clear-icon")]),s._v(", #9237 (by @AdamSGit)")]),t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("default-time")]),s._v(", #9094 (by @nighca)")]),t("li",[t("code",{pre:!0},[s._v("value-format")]),s._v(" ahora soporta "),t("code",{pre:!0},[s._v("timestamp")]),s._v(", #9319 (by @wacky6)")])])]),t("li",[s._v("InputNumber\n"),t("ul",[t("li",[s._v("Ahora el valor vinculado puede ser "),t("code",{pre:!0},[s._v("undefined")]),s._v(", #9361")])])]),t("li",[s._v("Select\n"),t("ul",[t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("auto-complete")]),s._v(", #9388")])])]),t("li",[s._v("Form\n"),t("ul",[t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("disabled")]),s._v(", #9529")]),t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("validateOnRuleChange")]),s._v(", #8141")])])]),t("li",[s._v("Notification\n"),t("ul",[t("li",[s._v("Agregado el metodo "),t("code",{pre:!0},[s._v("closeAll")]),s._v(", #9514")])])])]),t("h4",{attrs:{id:"bug-fixes-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),t("ul",[t("li",[s._v("InputNumber\n"),t("ul",[t("li",[s._v("Arreglado el reseteo del valor cuando tiene punto decimal, #9116")])])]),t("li",[s._v("Dropdown\n"),t("ul",[t("li",[s._v("Arreglado el dropdown menu que tenia un posicionamiento incorrecto cuando la página sólo tiene una barra de desplazamiento horizontal en algunos navegadores, #9138 (by @banzhuanmei)")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Corregido un error en el cálculo del número de columnas fijas después de que los datos de la columna cambian, #9188（by @kolesoffac）")]),t("li",[s._v("Corregido el borde de la última columna de la cabecera agrupada que no se visualizaba correctamente., #9326")]),t("li",[s._v("Corregido el posicionamiento incorrecto del header de la tabla en Safari, #9327")]),t("li",[s._v("Corregido fila expandida colapsaba cuando cambiaban los datos de la tabla, #9462")]),t("li",[s._v("Corregido renders múltiples innecesarios en algunas condiciones, #9426")]),t("li",[s._v("Corregido un error de calculo en el ancho de la columna cuando "),t("code",{pre:!0},[s._v("width")]),s._v(" cambiaba en TableColumn, #9426")])])]),t("li",[s._v("Loading\n"),t("ul",[t("li",[s._v("Corregido que en algunas ocasiones el loading no se ocultaba correctamente, #9313")])])]),t("li",[s._v("DatePicker\n"),t("ul",[t("li",[s._v("Corregido el metodo "),t("code",{pre:!0},[s._v("focus")]),s._v(" que no funcionaba en modo "),t("code",{pre:!0},[s._v("range")]),s._v(", #9437")]),t("li",[s._v('Corregido si se hacia clic en el botón "now" seguia seleccionando la fecha actual aunque estuviera desactivado, #9470 (by @wacky6)')]),t("li",[s._v("Corregido fijación de fechas al navegar, #9577 (by @wacky6)")])])]),t("li",[s._v("Steps\n"),t("ul",[t("li",[s._v("Corregido error de estilos en IE 11, #9454")])])])]),t("h4",{attrs:{id:"breaking-changes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes")]),t("ul",[t("li",[s._v("Menu\n"),t("ul",[t("li",[s._v("El menú desplegable en modo "),t("code",{pre:!0},[s._v("collapse")]),s._v(" ahora se agrega directamente al "),t("code",{pre:!0},[s._v("body")]),s._v(", de modo que es visible cuando está anidado en Aside, #9263")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Ahora, al marcar los checkboxes en la Tabla de selección múltiple no se activa el evento "),t("code",{pre:!0},[s._v("row-click")]),s._v(", #9467")])])]),t("li",[s._v("Loading\n"),t("ul",[t("li",[s._v("El "),t("code",{pre:!0},[s._v("z-index")]),s._v(" de la máscara de carga non-fullscreen se cambia a 2000. El "),t("code",{pre:!0},[s._v("z-index")]),s._v(" de la máscara de carga fullscreen se actualiza dinámicamente con los componentes emergentes, #9522")])])]),t("li",[s._v("Dropdown\n"),t("ul",[t("li",[s._v("Los atributos "),t("code",{pre:!0},[s._v("show-timeout")]),s._v(" y "),t("code",{pre:!0},[s._v("hide-timeout")]),s._v(" ahora solo trabajan si se dispara "),t("code",{pre:!0},[s._v("hover")]),s._v(", #9573")])])])]),t("h3",{attrs:{id:"2-0-11"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.11")]),t("p",[t("em",[s._v("2018-01-08")])]),t("ul",[t("li",[s._v("Corregido el problema de color del borde del Select cuando está el slot "),t("code",{pre:!0},[s._v("prepend")]),s._v(" o "),t("code",{pre:!0},[s._v("append")]),s._v(" del Input, #9089")]),t("li",[s._v("Corregido el parámetro "),t("code",{pre:!0},[s._v("remove-tag")]),s._v(" de Select, #9090")]),t("li",[s._v("Añadido los atributos "),t("code",{pre:!0},[s._v("show-timeout")]),s._v(" y "),t("code",{pre:!0},[s._v("hide-timeout")]),s._v(" para SubMenu, #8934 (por @HugoLew)")]),t("li",[s._v("Corregido el estilo de Tooltip de "),t("code",{pre:!0},[s._v("show-overflow-tooltip")]),s._v(" que faltaba cuando Table era importada bajo demanda, #9130")]),t("li",[s._v("Se ha corregido el mal funcionamiento de ordenación de la columna de Table despues que "),t("code",{pre:!0},[s._v("clearSort")]),s._v(" era ejecutado en esa columna, #9100 (por @zEmily)")]),t("li",[s._v("El fichero de configuración i18n para el checo se renombra de "),t("code",{pre:!0},[s._v("cz")]),s._v(" a "),t("code",{pre:!0},[s._v("cs-CZ")]),s._v(", #9164")])]),t("h3",{attrs:{id:"2-0-10"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.10")]),t("p",[t("em",[s._v("2017-12-29")])]),t("ul",[t("li",[s._v("Corregido el calculo incorrecto de la altura máxima de Table cuando fixed column y summary row coexisten, #9026")]),t("li",[s._v("Solucionado el estilo de color que no lo compilaba para textos vacíos en Table, #9028")]),t("li",[s._v("Ahora DatePicker sólo emite el evento "),t("code",{pre:!0},[s._v("change")]),s._v(" cuando el valor cambia verdaderamente, #9029 (by @remizovvv)")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("tabindex")]),s._v(" para Input, #9041 (by @dicklwm)")])]),t("h3",{attrs:{id:"2-0-9"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.9🎄")]),t("p",[t("em",[s._v("2017-12-24")])]),t("ul",[t("li",[s._v("Añadida la función de enganche (hook) "),t("code",{pre:!0},[s._v("before-remove")]),s._v(" para Upload, #8788 (by @firesh)")]),t("li",[s._v("Arreglado el valor inicial de error que no funcionaba para FormItem, #8840")]),t("li",[s._v("Ahora la directiva Loading soporta nombre de clase personalizado asignando el atributo "),t("code",{pre:!0},[s._v("element-loading-custom-class")]),s._v(", #8826 (por @earlymeme)")]),t("li",[s._v("Arreglado CarouselItem que se ponía invisible cuando los datos eran actualizados asincrónicamente, #8921")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("renderAfterExpand")]),s._v(" para Tree, #8972")])]),t("h3",{attrs:{id:"2-0-8"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.8")]),t("p",[t("em",[s._v("2017-12-12")])]),t("ul",[t("li",[s._v("Agregada la documentacion en español")]),t("li",[s._v("Arreglado "),t("code",{pre:!0},[s._v("show-timeout")]),s._v(" de Dropdown que no funcionaba cuando se disparaba el click, #8734 (por @presidenten)")]),t("li",[s._v("Arreglado el tiempo de validacion del Form cuando se disparaba el blur, #8776")]),t("li",[s._v("Arreglado el evento de perdida de foco (blur) del DatePicker por rangos, #8784")]),t("li",[t("code",{pre:!0},[s._v("format")]),s._v(" de TimePicker ahora soporta AM/PM, #8620 (por @firesh)")])]),t("h3",{attrs:{id:"2-0-7"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.7")]),t("p",[t("em",[s._v("2017-11-29")])]),t("ul",[t("li",[s._v("Solucionado el estilo disabled en el texto de button, #8570")])]),t("h3",{attrs:{id:"2-0-6"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.6")]),t("p",[t("em",[s._v("2017-11-29")])]),t("ul",[t("li",[s._v("Corregido error de estilo de los iconos de ordenación de Table, #8405")]),t("li",[s._v("Corregido activacion para Popover cuando "),t("code",{pre:!0},[s._v("trigger")]),s._v(" es manual, #8467")]),t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("prefix-icon")]),s._v(" y "),t("code",{pre:!0},[s._v("suffix-icon")]),s._v(" para Autocomplete, #8446 (por @liyanlong)")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("separator")]),s._v(" para Cascader, #8501")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("clearable")]),s._v(" para Input, #8509 (por @lbogdan)")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("background")]),s._v(" para Pagination, #8553")])]),t("h3",{attrs:{id:"2-0-5"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.5")]),t("p",[t("em",[s._v("2017-11-17")])]),t("ul",[t("li",[s._v("Solucionado regresion en 2.0.4 de Popover, Tree, Breadcrumb and Cascader, #8188 #8217 #8283")]),t("li",[s._v("Solucionado Fuga de memoria de la directiva clickoutside, #8168 #8225 (por @badpunman @STLighter)")]),t("li",[s._v("Solucionada la altura en multiple Select cuando se borra su valor, #8317 (por @luciy)")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("collapse-tags")]),s._v(" para multiple Select para reemplazar las tags con una línea de texto, #8190")]),t("li",[s._v("Solucionado el alto consumo de CPU causado por Table cuando esta oculta, #8351")]),t("li",[s._v("Ahora puede usar el método "),t("code",{pre:!0},[s._v("doLayout")]),s._v(" de Table para actualizar su diseño, #8351")])]),t("h3",{attrs:{id:"2-0-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.4")]),t("p",[t("em",[s._v("2017-11-10")])]),t("ul",[t("li",[s._v("Accesibilidad mejorada para Cascader, Dropdown, Message, Notification, Popover, Tooltip y Tree")]),t("li",[s._v("Arreglado el cambio de tamaño del Container cuando el ancho de la vista disminuye, #8042")]),t("li",[s._v("Arreglado Tree's "),t("code",{pre:!0},[s._v("updateKeyChildren")]),s._v(" borraba incorrectamente los nodos hijos, #8100")]),t("li",[s._v("Arreglado la altura de los bordes de CheckboxBotón's cuando esta anidado en un Form, #8100")]),t("li",[s._v("Arreglado error de análisis de los Menu's para los colores personalizados, #8153 (por @zhouyixiang)")])]),t("h3",{attrs:{id:"2-0-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.3")]),t("p",[t("em",[s._v("2017-11-03")])]),t("ul",[t("li",[s._v("Solucionado atributos "),t("code",{pre:!0},[s._v("editable")]),s._v(" and "),t("code",{pre:!0},[s._v("readonly")]),s._v(" de DatePicker de los rangos, #7922")]),t("li",[s._v("Corregido error de estilo de los Tabs anidados, #7941")]),t("li",[s._v("Corregido error de estilo del último Step de Steps verticales, #7980")]),t("li",[s._v("Corregido el tiempo de activación del evento "),t("code",{pre:!0},[s._v("current-change")]),s._v(" para Pagination, #7995")]),t("li",[s._v("Corregido Tooltip no registrado en el Menu, #7995")])]),t("h3",{attrs:{id:"2-0-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.2")]),t("p",[t("em",[s._v("2017-10-31")])]),t("ul",[t("li",[s._v("Ahora haciendo clic con el botón derecho del ratón en los botones de InputNumber no cambiará su valor, #7817")]),t("li",[s._v("El metodo "),t("code",{pre:!0},[s._v("validate")]),s._v(" de Form ahora puede esperar por validaciones asíncronas antes de ejecutar su devolución de llamada, #7774 (por @Allenice)")]),t("li",[s._v("Corregido la selección de rango de DatePicker no funcionaba en los navegadores Chromium 53-57, #7838")]),t("li",[s._v("Corregido la perdida de previsualización e iconos de eliminar de Upload cuando su "),t("code",{pre:!0},[s._v("list-type")]),s._v(" es picture-card, #7857")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("sort-by")]),s._v(" para TableColumn, #7828 (por @wangfengming)")]),t("li",[s._v("Corregido que a veces DatePicker muestra un número de año incorrecto al seleccionar la primera semana en modo week, #7860 (por @hh23485)")]),t("li",[s._v("Corregido error de estilo de icono de Step vertical, #7891")]),t("li",[s._v("El área hot para las flechas de nodo en Tree se expandia, #7891")])]),t("h3",{attrs:{id:"2-0-1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.1")]),t("p",[t("em",[s._v("2017-10-28")])]),t("ul",[t("li",[s._v("Corregido error de estilo de RadioButton y CheckboxButton, #7793")]),t("li",[s._v("Corregido TimePicker no responde al desplazamiento del ratón en algunas condiciones, #7811")]),t("li",[s._v("Corregido estilos incompletos de algunos componentes cuando se importan bajo demanda, #7811")])]),t("h3",{attrs:{id:"2-0-0-carbon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.0 Carbon")]),t("p",[t("em",[s._v("2017-10-27")])]),t("h4",{attrs:{id:"new-features-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features")]),t("ul",[t("li",[s._v("General\n"),t("ul",[t("li",[s._v("Un nuevo tema: "),t("code",{pre:!0},[s._v("theme-chalk")])]),t("li",[s._v("Se ha mejorado la accesibilidad de los siguientes componentes: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),t("li",[s._v("Añadido tipografías TypeScript")]),t("li",[s._v("Todos los iconos existentes son rediseñados. Se han añadido algunos iconos nuevos")]),t("li",[s._v("Añadida una serie de clases de utilidades basadas en puntos de ruptura que ocultan elementos cuando el tamaño del viewport cumple ciertas condiciones")]),t("li",[s._v("Componentes de diseño añadidos: Container, Header, Aside, Main, Footer.")]),t("li",[s._v("Ahora puede configurar los tamaños de componentes a nivel global. Al importar Element, puede añadir un objeto de configuración global con un prop "),t("code",{pre:!0},[s._v("size")]),s._v(" para configurar tamaños predeterminados para todos los componentes.")])])]),t("li",[s._v("Button\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("round")]),s._v(" añadido. Se usa para botones de esquinas redondas #6643")])])]),t("li",[s._v("TimeSelect\n"),t("ul",[t("li",[s._v("Ahora puede ser navegado por "),t("code",{pre:!0},[s._v("Up")]),s._v(" y "),t("code",{pre:!0},[s._v("Down")]),s._v(", y presionando "),t("code",{pre:!0},[s._v("Enter")]),s._v(" selecciona la hora #6023")])])]),t("li",[s._v("TimePicker\n"),t("ul",[t("li",[s._v("Ahora puede ser navegado por "),t("code",{pre:!0},[s._v("Up")]),s._v(" y "),t("code",{pre:!0},[s._v("Down")]),s._v(", y presionando "),t("code",{pre:!0},[s._v("Enter")]),s._v(" selecciona la hora #6050")]),t("li",[s._v("Añadido "),t("code",{pre:!0},[s._v("start-placeholder")]),s._v(" y "),t("code",{pre:!0},[s._v("end-placeholder")]),s._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("arrow-control")]),s._v(" para hacer girar el tiempo con las flechas #7438")])])]),t("li",[s._v("Tree\n"),t("ul",[t("li",[s._v("Ahora los nodos hijo no se renderizan antes de la primera expansión #6257")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("check-descendants")]),s._v(". Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo "),t("code",{pre:!0},[s._v("lazy")]),s._v(" #6235")])])]),t("li",[s._v("Tag\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("size")]),s._v(" añadido #7203")])])]),t("li",[s._v("Datepicker\n"),t("ul",[t("li",[s._v("Ahora "),t("code",{pre:!0},[s._v("timeFormat")]),s._v(" puede dar formato al TimePicker cuando type está configurado en "),t("code",{pre:!0},[s._v("datetimerange")]),s._v(" #6052")]),t("li",[s._v("Añadido "),t("code",{pre:!0},[s._v("start-placeholder")]),s._v(" y "),t("code",{pre:!0},[s._v("end-placeholder")]),s._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("value-format")]),s._v(" añadido para personalizar el formato del valor enlazado, #7367")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("unlink-panels")]),s._v(" para desacoplar los dos paneles de fechas al seleccionar un rango.")])])]),t("li",[s._v("MessageBox\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("closeOnHashChange")]),s._v(" #6043")]),t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("center")]),s._v(" agregado para que el contenido pueda ser centrado #7029")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("roundButton")]),s._v(" para mostrar Botones redondeados #7029")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),t("sup",[s._v("*")]),s._v(" #6043")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("inputType")]),s._v(" para asignar el tipo para el input interno, #7651")])])]),t("li",[s._v("Dialog\n"),t("ul",[t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("width")]),s._v(", "),t("code",{pre:!0},[s._v("fullscreen")]),s._v(", "),t("code",{pre:!0},[s._v("append-to-body")]),s._v(". Ahora Dialog puede ser anidado")]),t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("center")]),s._v(" agregado para que el contenido pueda ser centrado #7042")]),t("li",[s._v("Añadidos "),t("code",{pre:!0},[s._v("focus-after-closed")]),s._v(", "),t("code",{pre:!0},[s._v("focus-after-open")]),s._v(" para mejorar la accesibilidad #6511")])])]),t("li",[s._v("ColorPicker\n"),t("ul",[t("li",[s._v("Ahora puede escribir colores en el input #6167")]),t("li",[s._v("Añadidos atributos "),t("code",{pre:!0},[s._v("size")]),s._v(" y "),t("code",{pre:!0},[s._v("disabled")]),s._v(" #7026")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("popper-class")]),s._v(" #7351")])])]),t("li",[s._v("Message\n"),t("ul",[t("li",[s._v("Ahora el color de los iconos puede ser sustituido por CSS #6207")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),t("sup",[s._v("*")]),s._v(" #6207")]),t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("center")]),s._v(" agregado para que el contenido pueda ser centrado #6875")])])]),t("li",[s._v("Notification\n"),t("ul",[t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("position")]),s._v(" para configurar donde aparece Notification #6231")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" . Cuando está configurado en true, el mensaje será analizado como cadena HTML"),t("sup",[s._v("*")]),s._v(" #6231")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("showClose")]),s._v(" para ocultar el botón de cierre #6402")])])]),t("li",[s._v("Rate\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("show-score")]),s._v(" para determinar si la puntuación actual se muestra #6295")])])]),t("li",[s._v("Tabs\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("tab-position")]),s._v(" #6096")])])]),t("li",[s._v("Radio\n"),t("ul",[t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("border")]),s._v(" y "),t("code",{pre:!0},[s._v("size")]),s._v(" #6690")])])]),t("li",[s._v("Checkbox\n"),t("ul",[t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("border")]),s._v(" y "),t("code",{pre:!0},[s._v("size")]),s._v(" #6690")])])]),t("li",[s._v("Alert\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("center")]),s._v(" agregado para que el contenido pueda ser centrado #6876")])])]),t("li",[s._v("Menu\n"),t("ul",[t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("background-color")]),s._v(", "),t("code",{pre:!0},[s._v("text-color")]),s._v(" y "),t("code",{pre:!0},[s._v("active-text-color")]),s._v(" #7064")]),t("li",[s._v("Añadidos los methods "),t("code",{pre:!0},[s._v("open")]),s._v(" and "),t("code",{pre:!0},[s._v("close")]),s._v(" para abrir y cerrar los SubMenu con programación, #7412")])])]),t("li",[s._v("Form\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("inline-message")]),s._v(" para determinar si el mensaje de validación se muestra inline #7032")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("status-icon")]),s._v(" para mostrar un icono de retroalimentación cuando se valida #7032")]),t("li",[s._v("Form y FormItem ahora tienen un atributo "),t("code",{pre:!0},[s._v("size")]),s._v(". Los componentes internos heredarán este tamaño si no se especifica en ellos mismos, #7428")]),t("li",[s._v("Método "),t("code",{pre:!0},[s._v("validate")]),s._v(" devolverá ahora una promesa si se omite la llamada de retorno, #7405")]),t("li",[s._v("Añadido método "),t("code",{pre:!0},[s._v("clearValidate")]),s._v(" para limpiar los resultados de las validaciones de todos los form items, #7623")])])]),t("li",[s._v("Input\n"),t("ul",[t("li",[s._v("Añadido slots con nombres "),t("code",{pre:!0},[s._v("suffix")]),s._v(" y "),t("code",{pre:!0},[s._v("prefix")]),s._v(" y atributos "),t("code",{pre:!0},[s._v("suffixIcon")]),s._v(" y "),t("code",{pre:!0},[s._v("prefixIcon")]),s._v(" para añadir contenido dentro del input #7032")])])]),t("li",[s._v("Breadcrumb\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("separator-class")]),s._v(" para dar soporte a los iconos como separadores de items #7203")])])]),t("li",[s._v("Steps\n"),t("ul",[t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("simple")]),s._v(" para activar Steps de estilo sencillo #7274")])])]),t("li",[s._v("Pagination\n"),t("ul",[t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("prev-text")]),s._v(" y "),t("code",{pre:!0},[s._v("next-text")]),s._v(" para personalizar los textos de la página anterior y de la página siguiente #7005")])])]),t("li",[s._v("Loading\n"),t("ul",[t("li",[s._v("Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props "),t("code",{pre:!0},[s._v("spinner")]),s._v(" y "),t("code",{pre:!0},[s._v("background")]),s._v(" , #7390")])])]),t("li",[s._v("Autocomplete\n"),t("ul",[t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("debounce")]),s._v(", #7413")])])]),t("li",[s._v("Upload\n"),t("ul",[t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("limit")]),s._v(" and "),t("code",{pre:!0},[s._v("on-exceed")]),s._v(" para limitar la cantidad de archivos, #7405")])])]),t("li",[s._v("DateTimePicker\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("time-arrow-control")]),s._v(" para activar "),t("code",{pre:!0},[s._v("arrow-control")]),s._v(" del TimePicker anidado, #7438")])])]),t("li",[s._v("Layout\n"),t("ul",[t("li",[s._v("Añadido un nuevo breakpoint "),t("code",{pre:!0},[s._v("xl")]),s._v(" para viewport más ancho que 1920px")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("span-method")]),s._v(" para combinar celdas")]),t("li",[s._v("Añadido el método "),t("code",{pre:!0},[s._v("clearSort")]),s._v(" para borrar la clasificación programáticamente")]),t("li",[s._v("Añadido el método "),t("code",{pre:!0},[s._v("clearFilter")]),s._v(" para limpiar el filtro de forma programática")]),t("li",[s._v("Para las filas ampliables, cuando se amplía una fila, se añadirá una clase "),t("code",{pre:!0},[s._v(".expanded")]),s._v(" a su lista de clases, para que pueda personalizar su estilo.")]),t("li",[s._v("Atributo de "),t("code",{pre:!0},[s._v("size")]),s._v(" añadido")]),t("li",[s._v("Añadido el método "),t("code",{pre:!0},[s._v("toggleRowExpansion")]),s._v(" para expandir o contraer filas expandibles programáticamente.")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("cell-class-name")]),s._v(" para asignar el nombre de la clase para las celdas")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("cell-style")]),s._v(" para dar estilo a las celdas")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("header-row-class-name")]),s._v(" para asignar el nombre de clase para las filas de encabezado.")]),t("li",[s._v("Añadido un atributo "),t("code",{pre:!0},[s._v("header-row-style")]),s._v(" para el estilo de encabezado")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("header-cell-class-name")]),s._v(" para asignar el nombre de la clase para las celdas de encabezado.")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("header-cell-style")]),s._v(" a las celdas de encabezado de estilo")]),t("li",[s._v("El atributo prop de TableColumn ahora acepta las notaciones "),t("code",{pre:!0},[s._v("object[key]")])]),t("li",[s._v("Atributo de "),t("code",{pre:!0},[s._v("index")]),s._v(" añadido para TableColumn para personalizar índices de filas")])])]),t("li",[s._v("Select\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("reserve-keyword")]),s._v(" para reservar la palabra clave de búsqueda actual después de seleccionar una opción.")])])])]),t("h4",{attrs:{id:"bug-fixes-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),t("ul",[t("li",[s._v("DatePicker\n"),t("ul",[t("li",[s._v("Arreglado "),t("code",{pre:!0},[s._v("v-model")]),s._v(" que devolvia el segundo día de la semana seleccionada en modo week #6038")]),t("li",[s._v("Arreglado el primer input comenzaba borrado con el type "),t("code",{pre:!0},[s._v("daterange")]),s._v(" #6021")])])]),t("li",[s._v("DateTimePicker\n"),t("ul",[t("li",[s._v("Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090")]),t("li",[s._v("Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076")])])]),t("li",[s._v("TimePicker\n"),t("ul",[t("li",[s._v("Arreglado "),t("code",{pre:!0},[s._v("v-model")]),s._v(" que no se actualizaba correctamente cuando no tenia el foco #6023")])])]),t("li",[s._v("Dialog\n"),t("ul",[t("li",[s._v("Arreglado textos que tenian bordes borrosos al abrir y cerrar dropdowns anidados #6088")])])]),t("li",[s._v("Select\n"),t("ul",[t("li",[s._v("Rendimiento mejorado. Ahora Vue dev-tool no se bloqueará cuando un gran número de Selects sean destruidos #6151")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo "),t("code",{pre:!0},[s._v("display: none")])]),t("li",[s._v("Arreglado Table ahora amplia su ancho cuando el elemento padre tiene "),t("code",{pre:!0},[s._v("display: flex")])]),t("li",[s._v("Arreglado un bug que corregía las columnas de una tabla con slot con nombre "),t("code",{pre:!0},[s._v("append")]),s._v(" que desaparecia cuando los datos eran recuperados dinámicamente.")]),t("li",[s._v("Arreglado el atributo "),t("code",{pre:!0},[s._v("expand-row-keys")]),s._v(" que no funcionan con el valor inicial")]),t("li",[s._v("Fallo del filtro corregido al actualizar los datos")]),t("li",[s._v("Se ha corregido un error de cálculo de la disposición de columnas fijas con cabeceras agrupadas.")]),t("li",[s._v("Corregido un error de "),t("code",{pre:!0},[s._v("max-height")]),s._v(" dinámico")]),t("li",[s._v("Corregidos algunos errores de cálculo de estilo")])])])]),t("h4",{attrs:{id:"breaking-changes-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes")]),t("ul",[t("li",[s._v("General\n"),t("ul",[t("li",[s._v("Eliminado "),t("code",{pre:!0},[s._v("theme-default")])]),t("li",[s._v("Compatible con Vue 2.5.2+ e IE 10+")]),t("li",[s._v("Evento "),t("code",{pre:!0},[s._v("change")]),s._v(" de componentes del formulario y evento "),t("code",{pre:!0},[s._v("current-change")]),s._v(" de Pagination ahora sólo se activa en la interacción del usuario.")]),t("li",[s._v("El atributo "),t("code",{pre:!0},[s._v("size")]),s._v(" del botón y los componentes del formulario aceptan ahora los tamaños "),t("code",{pre:!0},[s._v("medium")]),s._v(", "),t("code",{pre:!0},[s._v("small")]),s._v(" y "),t("code",{pre:!0},[s._v("mini")]),s._v(".")]),t("li",[s._v("Para facilitar el uso de iconos de terceros, los atributos "),t("code",{pre:!0},[s._v("icon")]),s._v(" de Button y Steps y los atributos "),t("code",{pre:!0},[s._v("prefix-icon")]),s._v(" y "),t("code",{pre:!0},[s._v("suffix-icon")]),s._v(" del input ahora requieren un nombre de clase completo.")])])]),t("li",[s._v("Dialog\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("size")]),s._v(" eliminado. Ahora el tamaño de Dialog se puede configurar con "),t("code",{pre:!0},[s._v("width")]),s._v(" y "),t("code",{pre:!0},[s._v("fullscreen")])]),t("li",[s._v("Ahora la visibilidad del Diálogo no puede ser controlada por "),t("code",{pre:!0},[s._v("v-model")])])])]),t("li",[s._v("Rate\n"),t("ul",[t("li",[t("code",{pre:!0},[s._v("text-template")]),s._v(" a sido renombrado a "),t("code",{pre:!0},[s._v("score-template")])])])]),t("li",[s._v("Dropdown\n"),t("ul",[t("li",[t("code",{pre:!0},[s._v("menu-align")]),s._v(" a sido renombrado a "),t("code",{pre:!0},[s._v("placement")]),s._v(". Ahora soporta más posiciones")])])]),t("li",[s._v("Transfer\n"),t("ul",[t("li",[t("code",{pre:!0},[s._v("footer-format")]),s._v(" a sido renombrado a "),t("code",{pre:!0},[s._v("format")])])])]),t("li",[s._v("Switch\n"),t("ul",[t("li",[s._v("Los atributos que comienzan con "),t("code",{pre:!0},[s._v("on*")]),s._v(" serán analizados en eventos en JSX, haciendo que todos los atributos "),t("code",{pre:!0},[s._v("on*")]),s._v(" de Switch no puedan trabajar en JSX. Por lo tanto, los atributos "),t("code",{pre:!0},[s._v("on*")]),s._v(" se renombran a "),t("code",{pre:!0},[s._v("active-*")]),s._v(", y por consiguiente los atributos "),t("code",{pre:!0},[s._v("off-*")]),s._v(" se renombran a "),t("code",{pre:!0},[s._v("inactivado-*")]),s._v(". Este cambio afecta a los siguientes atributos: "),t("code",{pre:!0},[s._v("on-icon-class")]),s._v(", "),t("code",{pre:!0},[s._v("off-icon-class")]),s._v(", "),t("code",{pre:!0},[s._v("on-text")]),s._v(", "),t("code",{pre:!0},[s._v("off-text")]),s._v(", "),t("code",{pre:!0},[s._v("on-color")]),s._v(", "),t("code",{pre:!0},[s._v("off-color")]),s._v(", "),t("code",{pre:!0},[s._v("on-value")]),s._v(", "),t("code",{pre:!0},[s._v("off-value")]),s._v(".")]),t("li",[s._v("Los atributos "),t("code",{pre:!0},[s._v("active-text")]),s._v(" y "),t("code",{pre:!0},[s._v("inactive-text")]),s._v(" ahora no tienen valores por defecto.")])])]),t("li",[s._v("Tag\n"),t("ul",[t("li",[s._v("El atributo type acepta ahora "),t("code",{pre:!0},[s._v("success")]),s._v(", "),t("code",{pre:!0},[s._v("info")]),s._v(", "),t("code",{pre:!0},[s._v("warning")]),s._v(" y "),t("code",{pre:!0},[s._v("danger")])])])]),t("li",[s._v("Menu\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("theme")]),s._v(" eliminado. El color de Menu se puede configurar utilizando "),t("code",{pre:!0},[s._v("background-color")]),s._v(", "),t("code",{pre:!0},[s._v("text-color")]),s._v(" y "),t("code",{pre:!0},[s._v("active-text-color")])])])]),t("li",[s._v("Input\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("icon")]),s._v(" eliminado. Ahora el icono del sufijo puede configurarse usando el atributo "),t("code",{pre:!0},[s._v("suffix-icon")]),s._v(" o el slot con nombre "),t("code",{pre:!0},[s._v("suffix")]),s._v(".")]),t("li",[s._v("Eliminado el atributo "),t("code",{pre:!0},[s._v("on-icon-click")]),s._v(" y el evento "),t("code",{pre:!0},[s._v("click")]),s._v(". Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre.")]),t("li",[s._v("El evento "),t("code",{pre:!0},[s._v("change")]),s._v(" se comporta ahora como el nativo, que se activa sólo en la perdida del foco o presionando enter. Si necesita responder a las entradas de usuario en tiempo real, puede utilizar el evento "),t("code",{pre:!0},[s._v("input")]),s._v(".")])])]),t("li",[s._v("Autocomplete\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("custom-item")]),s._v(" eliminado. Ahora la plantilla de sugerencias del input se puede personalizar utilizando "),t("code",{pre:!0},[s._v("scoped slot")])]),t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("props")]),s._v(" eliminado. Ahora puede utilizar el atributo "),t("code",{pre:!0},[s._v("value-key")]),s._v(" para designar el nombre de la clave del objeto de sugerencia del input para su visualización.")])])]),t("li",[s._v("Steps\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("center")]),s._v(" eliminado")]),t("li",[s._v("Ahora Steps llenara su contenedor padre por defecto")])])]),t("li",[s._v("DatePicker\n"),t("ul",[t("li",[s._v("Los parámetros del evento "),t("code",{pre:!0},[s._v("change")]),s._v(" de DatePicker son ahora el valor vinculante en sí mismo. Su formato es controlado por "),t("code",{pre:!0},[s._v("value-format")])])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Soporte eliminado para personalizar la plantilla de columnas mediante "),t("code",{pre:!0},[s._v("inline-template")])]),t("li",[t("code",{pre:!0},[s._v("sort-method")]),s._v(" ahora se alinea con "),t("code",{pre:!0},[s._v("Array.sort")]),s._v(". Debería devolver un número en lugar de un booleano")]),t("li",[s._v("El slot "),t("code",{pre:!0},[s._v("append")]),s._v(" se desplazo fuera del elemento "),t("code",{pre:!0},[s._v("tbody")]),s._v(" para evitar múltiples renderizados.")]),t("li",[s._v("Evento "),t("code",{pre:!0},[s._v("expand")]),s._v(" se renombro a "),t("code",{pre:!0},[s._v("expand-change")])]),t("li",[s._v("Los parametros de los métodos "),t("code",{pre:!0},[s._v("row-class-name")]),s._v(" y "),t("code",{pre:!0},[s._v("row-style")]),s._v(" son ahora un objeto")])])])]),t("h1"),t("p",[t("i",[t("sup",[s._v("*")]),s._v(" El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),t("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("ataques XSS")]),s._v(". Por lo tanto, cuando "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" está encendido, por favor asegúrese de que el contenido de "),t("code",{pre:!0},[s._v("message")]),s._v(" es confiable, y "),t("strong",[s._v("nunca")]),s._v(" asigne el "),t("code",{pre:!0},[s._v("message")]),s._v(" al contenido proporcionado por el usuario.")])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("GitHub Releases")])]),s._v("\n Lista de cambios\n ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},e=[],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){"use strict";function l(s){t(711)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(713),n=t.n(e),r=t(714),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(712);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("03a0ec5a",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".page-component__scroll{height:calc(100% - 80px);margin-top:80px}.page-component__scroll .el-scrollbar__wrap{overflow-x:auto}.page-component{box-sizing:border-box;height:100%}.page-component .page-component__nav{width:240px;position:fixed;top:0;bottom:0;margin-top:80px;transition:padding-top .3s}.page-component .page-component__nav .el-scrollbar__wrap{height:100%}.page-component .page-component__nav.is-extended{padding-top:0}.page-component .side-nav{height:100%;padding-top:50px;padding-bottom:50px;padding-right:0}.page-component .side-nav>ul{padding-bottom:50px}.page-component .page-component__content{padding-left:270px;padding-bottom:100px;box-sizing:border-box}.page-component .content{padding-top:50px}.page-component .content>h3{margin:55px 0 20px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #d8d8d8;padding:15px;max-width:250px}.page-component .content>table th{text-align:left;white-space:nowrap;color:#666;font-weight:400}.page-component .content>table td{color:#333}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .content>ul:not(.timeline){margin:10px 0;padding:0 0 0 20px;font-size:14px;color:#5e6d82;line-height:2em}.page-component .page-component-up{background-color:#fff;position:fixed;right:100px;bottom:150px;width:40px;height:40px;border-radius:20px;cursor:pointer;transition:.3s;box-shadow:0 0 6px rgba(0,0,0,.12);z-index:5}.page-component .page-component-up i{color:#409eff;display:block;line-height:40px;text-align:center;font-size:18px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{-ms-transform:translateY(-30px);transform:translateY(-30px);opacity:0}.page-component.page-container{padding:0}@media (max-width:768px){.page-component .page-component__nav{width:100%;position:static;margin-top:0}.page-component .side-nav{padding-top:0;padding-left:50px}.page-component .page-component__content{padding-left:10px;padding-right:10px}.page-component .content{padding-top:0}.page-component .content>table{overflow:auto;display:block}.page-component .page-component-up{display:none}}",""])},function(s,a,t){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}a.__esModule=!0;var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s},n=t(113),r=l(n),v=t(79),c=l(v),_=t(78),o=l(_);a.default={data:function(){return{lang:this.$route.meta.lang,navsData:c.default,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null}},watch:{"$route.path":function(){var s=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){s.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var s=document.querySelectorAll("h2 a,h3 a"),a=location.href.split("#").splice(0,2).join("#");[].slice.call(s).forEach(function(s){var t=s.getAttribute("href");s.href=a+t})}},goAnchor:function(){var s=this;if(location.href.match(/#/g).length>1){var a=function(){var a=location.href.match(/#[^#]+$/g);if(!a)return{v:void 0};var t=document.querySelector(a[0]);if(!t)return{v:void 0};setTimeout(function(a){s.componentScrollBox.scrollTop=t.offsetTop},50)}();if("object"===(void 0===a?"undefined":e(a)))return a.v}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var s=this.componentScrollBox.scrollTop;this.showBackToTop=s>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>s&&(this.showHeader=this.scrollTop>s),0===s&&(this.showHeader=!0),this.navFaded||r.default.$emit("fadeNav"),this.scrollTop=s}},created:function(){var s=this;r.default.$on("navFade",function(a){s.navFaded=a}),window.addEventListener("hashchange",function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,s.renderAnchorHref()):s.goAnchor()})},mounted:function(){this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=(0,o.default)(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[t("div",{staticClass:"page-container page-component"},[t("el-scrollbar",{staticClass:"page-component__nav"},[t("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),t("div",{staticClass:"page-component__content"},[t("router-view",{staticClass:"content"}),t("footer-nav")],1),t("transition",{attrs:{name:"back-top-fade"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:s.hover},on:{mouseenter:function(a){s.hover=!0},mouseleave:function(a){s.hover=!1},click:s.toTop}},[t("i",{staticClass:"el-icon-caret-top"})])])],1)])},e=[],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){"use strict";function l(s){t(716)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(718),n=t(0),r=l,v=n(null,e.a,!1,r,"data-v-6a827d0b",null);a.default=v.exports},function(s,a,t){var l=t(717);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("68dc80d1",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".cards[data-v-6a827d0b]{margin:30px 0 70px}.card[data-v-6a827d0b]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-6a827d0b]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-6a827d0b]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-6a827d0b]{font-size:14px;color:#99a9bf}",""])},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,l=s._self._c||a;return l("div",[l("h2",[s._v("Disciplinas de diseño")]),l("el-row",{staticClass:"cards",attrs:{gutter:14}},[l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:t(605),alt:"Consistency"}}),l("h4",[s._v("Consistencia")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:t(606),alt:"Feedback"}}),l("h4",[s._v("Comentarios")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:t(607),alt:"Efficiency"}}),l("h4",[s._v("Eficiencia")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:t(608),alt:"Controllability"}}),l("h4",[s._v("Control")]),l("span")])])],1),l("h3",[s._v("Consistencia")]),s._m(0),l("h3",[s._v("Comentarios")]),s._m(1),l("h3",[s._v("Eficiencia")]),s._m(2),l("h3",[s._v("Control")]),s._m(3)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("strong",[s._v("Consistente con la vida real: ")]),s._v("en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.")]),t("li",[t("strong",[s._v("Consistente dentro de la interfaz: ")]),s._v("todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("strong",[s._v("Comentarios sobre la operación: ")]),s._v("Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.")]),t("li",[t("strong",[s._v("Comentarios visuales: ")]),s._v("Refleja el estado actual al actualizar o reorganizar los elementos de la página.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("strong",[s._v("Simplifica el proceso: ")]),s._v("Mantiene el proceso operativo simple e intuitivo.")]),t("li",[t("strong",[s._v("Bien definido y claro: ")]),s._v("Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.")]),t("li",[t("strong",[s._v("Fácil de identificar: ")]),s._v("La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("strong",[s._v("Toma de decisiones: ")]),s._v("Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.")]),t("li",[t("strong",[s._v("Consecuencias controladas: ")]),s._v("Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales.")])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){"use strict";function l(s){t(720)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(722),n=t.n(e),r=t(723),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(721);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("239b0fa8",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,'.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li strong{color:#5e6d82;font-weight:400}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}@media (max-width:768px){.page-guide .content{padding-left:0}}',""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Disciplinas de diseño"},{path:"/nav",name:"Navegación"}]}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},e=[],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){"use strict";function l(s){t(725)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(727),n=t.n(e),r=t(728),v=t(0),c=l,_=v(n.a,r.a,!1,c,"data-v-59687fd6",null);a.default=_.exports},function(s,a,t){var l=t(726);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("32375050",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,'.cards .container[data-v-59687fd6]:after{clear:both}.cards .container[data-v-59687fd6]:after,.cards .container[data-v-59687fd6]:before{display:table;content:""}.banner[data-v-59687fd6]{text-align:center}.banner-desc[data-v-59687fd6]{padding-top:20px}.banner-desc h1[data-v-59687fd6]{font-size:34px;margin:0;line-height:48px;color:#555}.banner-desc p[data-v-59687fd6]{font-size:18px;line-height:28px;color:#888;margin:10px 0 5px}.sponsors[data-v-59687fd6]{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sponsor[data-v-59687fd6]{margin:0 20px 50px;display:-ms-inline-flexbox;display:inline-flex;width:300px;height:100px;-ms-flex-pack:center;justify-content:center}.sponsor img[data-v-59687fd6]{margin-right:20px}.sponsor div[data-v-59687fd6]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.sponsor p[data-v-59687fd6]{margin:0;line-height:1.8;color:#999;font-size:14px}.jumbotron[data-v-59687fd6]{width:890px;height:465px;margin:30px auto;position:relative}.jumbotron div[data-v-59687fd6]{width:100%;height:100%;background-color:transparent;position:absolute;top:0;left:0}.jumbotron img[data-v-59687fd6]{position:absolute}.jumbotron .jumbotron-cloud-1[data-v-59687fd6]{right:0;top:0;height:55px}.jumbotron .jumbotron-plant-2[data-v-59687fd6]{left:60px;top:200px}.jumbotron .jumbotron-web[data-v-59687fd6]{height:385px;top:35px;left:110px}.jumbotron .jumbotron-cloud-2[data-v-59687fd6]{left:0;top:50px;height:55px}.jumbotron .jumbotron-compo-1[data-v-59687fd6]{left:94px;height:90px;top:220px}.jumbotron .jumbotron-compo-2[data-v-59687fd6]{right:73px;top:60px;height:124px}.jumbotron .jumbotron-compo-3[data-v-59687fd6]{right:42px;top:200px;height:120px}.jumbotron .jumbotron-plant-1[data-v-59687fd6]{bottom:0;left:30px;height:185px}.jumbotron .jumbotron-figure-1[data-v-59687fd6]{bottom:0;right:180px;height:140px}.jumbotron .jumbotron-figure-2[data-v-59687fd6]{bottom:0;right:10px;height:68px}.cards[data-v-59687fd6]{margin:0 auto 110px;width:1140px}.cards .container[data-v-59687fd6]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-59687fd6]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-59687fd6]{width:160px;height:120px}.card[data-v-59687fd6]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-59687fd6]{margin:66px auto 60px}.card h3[data-v-59687fd6]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-59687fd6]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:20px}.card a[data-v-59687fd6]{height:53px;line-height:52px;font-size:14px;color:#409eff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-59687fd6]:hover{color:#fff;background:#409eff}.card[data-v-59687fd6]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@media (max-width:1140px){.cards[data-v-59687fd6]{width:100%}.cards .container[data-v-59687fd6]{width:100%;margin:0}.banner .container[data-v-59687fd6]{width:100%;box-sizing:border-box}.banner img[data-v-59687fd6]{right:0}}@media (max-width:1000px){.banner .container img[data-v-59687fd6],.jumbotron[data-v-59687fd6]{display:none}}@media (max-width:768px){.cards li[data-v-59687fd6]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-59687fd6]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-59687fd6],.banner-stars[data-v-59687fd6]{display:none}.banner-desc h2[data-v-59687fd6]{font-size:32px}.banner-desc p[data-v-59687fd6]{width:auto}}',""])},function(s,a,t){"use strict";a.__esModule=!0;var l=t(609);a.default={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new l.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,l=s._self._c||a;return l("div",[s._m(0),s._m(1),l("div",{staticClass:"sponsors"},[l("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==s.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[l("img",{attrs:{width:"35px",src:t(114),alt:"tipe.io"}}),s._m(2)]),s._m(3)]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:t(610),alt:""}}),l("h3",[s._v("Guía")]),l("p",[s._v("Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.")]),l("router-link",{attrs:{"active-class":"active",to:"/es/guide/design",exact:""}},[s._v("Ver detalle\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:t(611),alt:""}}),l("h3",[s._v("Componentes")]),l("p",[s._v("Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.")]),l("router-link",{attrs:{"active-class":"active",to:"/es/component/layout",exact:""}},[s._v("Ver detalle\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:t(612),alt:""}}),l("h3",[s._v("Recursos")]),l("p",[s._v("Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.")]),l("router-link",{attrs:{"active-class":"active",to:"/es/resource",exact:""}},[s._v("Ver detalle\n ")])],1)])])])])},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[s._v("Un kit de interfaz de usuario para la web")]),t("p",[s._v("Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto")])])])},function(){var s=this,a=s.$createElement,l=s._self._c||a;return l("div",{staticClass:"jumbotron"},[l("div",[l("img",{staticClass:"jumbotron-plant-2",attrs:{src:t(613),alt:""}}),l("img",{staticClass:"jumbotron-web",attrs:{src:t(614),alt:""}}),l("img",{staticClass:"jumbotron-plant-1",attrs:{src:t(615),alt:""}}),l("img",{staticClass:"jumbotron-figure-1",attrs:{src:t(616),alt:""}}),l("img",{staticClass:"jumbotron-figure-2",attrs:{src:t(617),alt:""}})]),l("div",{attrs:{"data-hover-layer":"0"}},[l("img",{staticClass:"jumbotron-cloud-1",attrs:{src:t(618),alt:""}}),l("img",{staticClass:"jumbotron-cloud-2",attrs:{src:t(619),alt:""}})]),l("div",{attrs:{"data-hover-layer":"1"}},[l("img",{staticClass:"jumbotron-compo-1",attrs:{src:t(620),alt:""}}),l("img",{staticClass:"jumbotron-compo-2",attrs:{src:t(621),alt:""}}),l("img",{staticClass:"jumbotron-compo-3",attrs:{src:t(622),alt:""}})])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("p",[s._v("Sponsored by Tipe.io")]),t("p",[s._v("Next Generation API-first CMS")])])},function(){var s=this,a=s.$createElement,l=s._self._c||a;return l("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[l("img",{attrs:{width:"45px",src:t(115),alt:"tipe.io"}}),l("div",[l("p",[s._v("Sponsored by 多会")]),l("p",[s._v("炫酷的新一代活动票务系统")])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){"use strict";function l(s){t(730)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(732),n=t.n(e),r=t(733),v=t(0),c=l,_=v(n.a,r.a,!1,c,"data-v-034dc2b4",null);a.default=_.exports},function(s,a,t){var l=t(731);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("41045dd2",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,"h3[data-v-034dc2b4]{margin-bottom:15px}.block[data-v-034dc2b4]{margin-bottom:55px}p[data-v-034dc2b4]{margin:0 0 15px}.nav-demos p[data-v-034dc2b4]{margin-bottom:50px}.nav-demos h5[data-v-034dc2b4]{margin:0}.nav-demos img[data-v-034dc2b4]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-034dc2b4]{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-034dc2b4]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-034dc2b4]{display:block;width:100%}.mask[data-v-034dc2b4]{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-034dc2b4],.zoom-leave-active[data-v-034dc2b4]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-034dc2b4],.zoom-leave-active[data-v-034dc2b4]{-ms-transform:scale(.3);transform:scale(.3);opacity:0}.fade-enter-active[data-v-034dc2b4],.fade-leave-active[data-v-034dc2b4]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-034dc2b4],.fade-leave-active[data-v-034dc2b4]{opacity:0}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(s){document.body.style.overflow=s?"hidden":""}},methods:{enlarge:function(s,a){var t=a.target,l={},e=document;l.left=(e.body.scrollWidth-s)/2,l.top=100,this.imgUrl=t.src,this.imgBound=t.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=a.clientX+"px "+a.clientY+"px",this.imgStyle.width=s+"px",this.showDialog=!0}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,l=s._self._c||a;return l("div",[l("h2",[s._v("Navegación")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("Navegación lateral")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._v("Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:t(623),alt:"Categorías de Nivel 1"},on:{click:function(a){s.enlarge(846,a)}}}),l("h5",[s._v("Categorías de Nivel 1")]),l("p",[s._v("Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.")]),l("img",{attrs:{src:t(624),alt:"Categorías de Nivel 2"},on:{click:function(a){s.enlarge(846,a)}}}),l("h5",[s._v("Categorías de Nivel 2")]),l("p",[s._v("La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.")]),l("img",{attrs:{src:t(625),alt:"Categorías de Nivel 3"},on:{click:function(a){s.enlarge(846,a)}}}),l("h5",[s._v("Categorías de Nivel 3")]),l("p",[s._v("Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.")])])],1)],1),l("div",{staticClass:"block"},[l("h3",[s._v("Navegación superior")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._v("Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:t(626),alt:""},on:{click:function(a){s.enlarge(846,a)}}}),l("p",[s._v("Adecuado para sitios con pocas navegaciones y grandes trozos.")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(a){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(a){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"block"},[t("p",[s._v("La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"block"},[t("h3",[s._v("Elige la navegación correcta")]),t("p",[s._v("Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.")])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){"use strict";function l(s){t(735)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(737),n=t(0),r=l,v=n(null,e.a,!1,r,"data-v-d71883ca",null);a.default=v.exports},function(s,a,t){var l=t(736);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("569e8e30",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,'.cards .container[data-v-d71883ca]:after{clear:both}.cards .container[data-v-d71883ca]:after,.cards .container[data-v-d71883ca]:before{display:table;content:""}.page-resource[data-v-d71883ca]{padding-top:55px;box-sizing:border-box}.page-resource .resource-placeholder[data-v-d71883ca]{margin:50px auto 100px;text-align:center}.page-resource .resource-placeholder img[data-v-d71883ca]{width:150px}.page-resource .resource-placeholder h4[data-v-d71883ca]{margin:20px 0 16px;font-size:16px;color:#1f2f3d;line-height:1}.page-resource .resource-placeholder p[data-v-d71883ca]{margin:0;font-size:14px;color:#99a9bf;line-height:1}.cards[data-v-d71883ca]{margin:35px auto 110px}.cards .container[data-v-d71883ca]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-d71883ca]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-d71883ca]{font-size:28px;margin:0}p[data-v-d71883ca]{font-size:14px;color:#5e6d82}.card[data-v-d71883ca]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-d71883ca]{margin:75px auto 35px;height:87px}.card h3[data-v-d71883ca]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-d71883ca]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.6}.card a[data-v-d71883ca]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#409eff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-d71883ca]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-d71883ca]{height:auto;padding-bottom:20px}.cards h3[data-v-d71883ca]{height:auto}}',""])},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,a=s.$createElement,l=s._self._c||a;return l("div",{staticClass:"page-container page-resource"},[l("h2",[s._v("Recursos")]),l("p",[s._v("Se están desarrollando más recursos")]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:t(627),alt:""}}),l("h3",[s._v("Plantilla de Sketch")]),l("p",[s._v("Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[s._v("Descarga")])])])])])])}],n={render:l,staticRenderFns:e};a.a=n},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,a,t){s.exports=t(1265)},function(s,a,t){"use strict";function l(s){t(1266)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1268),n=t.n(e),r=t(1269),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1267);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("570f90d8",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-box.demo-alert .el-alert{margin:20px 0 0}.demo-box.demo-alert .el-alert:first-child{margin:0}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Mostrar mensajes de alertas importantes.")]),s._m(1),t("p",[s._v("Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success"}}),t("el-alert",{attrs:{title:"info alert",type:"info"}}),t("el-alert",{attrs:{title:"warning alert",type:"warning"}}),t("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),t("p",[s._v("Alert provee 4 tipos de temas definidos por "),t("code",[s._v("type")]),s._v(", el valor por defecto es "),t("code",[s._v("info")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Personalizar el botón de cerrar como texto u otros símbolos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n hello() {\n alert('Hello World!');\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),t("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),t("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]],2),t("p",[s._v("Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo "),t("code",[s._v("closable")]),s._v(" define si el componente puede cerrarse o no. Acepta un "),t("code",[s._v("boolean")]),s._v(", que por defecto es "),t("code",[s._v("true")]),s._v(". También puede configurar el atributo "),t("code",[s._v("close-text")]),s._v(" para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo "),t("code",[s._v("close-text")]),s._v(" debe ser un string. El evento "),t("code",[s._v("close")]),s._v(" se dispara cuando el componente se cierra.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"unclosable alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":closable")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"customized close-text"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("close-text")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Gotcha"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"alert with callback"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"hello"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n hello() {\n alert("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Hello World!'")]),s._v(");\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Mostrar un icono mejora la legibilidad.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),t("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),t("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),t("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2),t("p",[s._v("Setear el atributo "),t("code",[s._v("show-icon")]),s._v(" muestra un icono que corresponde al tipo de Alert que se está mostrando.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),t("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),t("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),t("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Descripción incluye un mensaje con información más detallada.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2),t("p",[s._v("Además del atributo requerido "),t("code",[s._v("title")]),s._v(", se puede agregar el atributo "),t("code",[s._v("description")]),s._v(" para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"with description"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"This is a description."')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2),t("p",[s._v("Finalmente este es un ejemplo utilizando icono y descripción.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"personalizacion-del-boton-de-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-del-boton-de-cerrar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Personalización del botón de cerrar")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"usar-iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usar-iconos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Usar iconos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"texto-centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texto-centrado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Texto centrado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Para centrar el texto utilice el atributo "),t("code",{pre:!0},[s._v("center")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"con-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-descripcion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Con descripción")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"utilizando-icono-y-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utilizando-icono-y-descripcion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Utilizando icono y descripción")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("título. Requerido")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de componente")]),t("td",[s._v("string")]),t("td",[s._v("success/warning/info/error")]),t("td",[s._v("info")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("texto descriptivo. También puede ser pasado con el slot por defecto")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("si se puede cerrar o no")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("center")]),t("td",[s._v("si el texto debe estar centrado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("close-text")]),t("td",[s._v("texto de cerrado personalizado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-icon")]),t("td",[s._v("si un icono del tipo de alerta se debe mostrar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("close")]),t("td",[s._v("Se dispara cuando la alerta se cierra")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1271)},function(s,a,t){"use strict";function l(s){t(1272)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1274),n=t(0),r=l,v=n(null,e.a,!1,r,"data-v-36a83fd0",null);a.default=v.exports},function(s,a,t){var l=t(1273);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("0c8fa6ea",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,'.clearfix[data-v-36a83fd0]:after{clear:both}.clearfix[data-v-36a83fd0]:after,.clearfix[data-v-36a83fd0]:before{display:table;content:""}.share-button[data-v-36a83fd0]{width:36px;padding:10px}.mark[data-v-36a83fd0]{margin-top:8px;line-height:1;float:right}.item[data-v-36a83fd0]{margin-right:40px}',""])},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Marcas en forma de número o estado para botones e iconos.")]),s._m(1),t("p",[s._v("Muestra la cantidad de mensajes nuevos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n \n Click Me\n \n \n \n comments\n \n \n \n replies\n \n \n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{value:12}},[t("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),t("el-badge",{staticClass:"item",attrs:{value:3}},[t("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),t("el-dropdown",{attrs:{trigger:"click"}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Click Me"),t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n comments\n "),t("el-badge",{staticClass:"mark",attrs:{value:12}})],1),t("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n replies\n "),t("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),t("p",[s._v("La cantidad está definida por "),t("code",[s._v("value")]),s._v(" que acepta "),t("code",[s._v("Number")]),s._v(" o "),t("code",[s._v("String")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Click Me"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n comments\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" />")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n replies\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" />")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n"),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Se puede personalizar el valor máximo.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),t("p",[s._v("El valor máximo se define como "),t("code",[s._v("max")]),s._v(" el cual es un "),t("code",[s._v("Number")]),s._v(". Nota: solo funciona si "),t("code",[s._v("value")]),s._v(" es también un "),t("code",[s._v("Number")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"99"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n"),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Mostrar texto en vez de números.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),t("p",[s._v("Cuando "),t("code",[s._v("value")]),s._v(" es un "),t("code",[s._v("String")]),s._v(", puede mostrar texto personalizado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"new"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"hot"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n"),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puede utilizar un punto rojo para marcar contenido que debe ser notado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'query\n\n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("query")]),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1),t("p",[s._v("Use el atributo "),t("code",[s._v("is-dot")]),s._v(". Es un "),t("code",[s._v("Boolean")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("query"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"share-button"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n"),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"valor-maximo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valor-maximo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Valor máximo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"personalizaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[s._v("¶")]),s._v(" Personalizaciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"pequeno-punto-rojo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pequeno-punto-rojo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pequeño punto rojo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value")]),t("td",[s._v("valor a mostrar")]),t("td",[s._v("string, number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si "),t("code",{pre:!0},[s._v("value")]),s._v(" es un "),t("code",{pre:!0},[s._v("Number")])]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("is-dot")]),t("td",[s._v("si se debe mostrar un pequeño punto")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("hidden")]),t("td",[s._v("hidden badge")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1276)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1277),e=t(0),n=e(null,l.a,!1,null,null,null);a.default=n.exports},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n homepage\n promotion management\n promotion list\n promotion detail\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),t("el-breadcrumb-item",[s._v("promotion management")]),t("el-breadcrumb-item",[s._v("promotion list")]),t("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),t("p",[s._v("En "),t("code",[s._v("el-breadcrumb")]),s._v(", cada "),t("code",[s._v("el-breadcrumb-item")]),s._v(" es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo "),t("code",[s._v("String")]),s._v(" llamado "),t("code",[s._v("separator")]),s._v(", el mismo determina el caracter separador. El valor por defecto es '/'.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("separator")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"/"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":to")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n homepage\n promotion management\n promotion list\n promotion detail\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),t("el-breadcrumb-item",[s._v("promotion management")]),t("el-breadcrumb-item",[s._v("promotion list")]),t("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),t("p",[s._v("Setee "),t("code",[s._v("separator-class")]),s._v(" para que utilice "),t("code",[s._v("iconfont")]),s._v(" como separador，el mismo va a cubrir "),t("code",[s._v("separator")])]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("separator-class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-right"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":to")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"icono-separador"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icono-separador","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icono separador")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"breadcrumb-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("separator")]),t("td",[s._v("caracter separador")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("/")])]),t("tr",[t("td",[s._v("separator-class")]),t("td",[s._v("nombre de la clase del icono separador")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("-")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"breadcrumb-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Item atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("to")]),t("td",[s._v("ruta del link, lo mismo que "),t("code",{pre:!0},[s._v("to")]),s._v(" de "),t("code",{pre:!0},[s._v("vue-router")])]),t("td",[s._v("string/object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("replace")]),t("td",[s._v("si "),t("code",{pre:!0},[s._v("true")]),s._v(", la navegación no dejara una entrada en la historia")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1279)},function(s,a,t){"use strict";function l(s){t(1280)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1282),n=t(0),r=l,v=n(null,e.a,!1,r,null,null);a.default=v.exports},function(s,a,t){var l=t(1281);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("129cc1c7",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-box.demo-button .el-row{margin-bottom:10px}.demo-box.demo-button .el-button+.el-button{margin-left:10px}.demo-box.demo-button .el-button-group{margin-bottom:20px}.demo-box.demo-button .el-button-group .el-button+.el-button{margin-left:0}.demo-box.demo-button .el-button-group+.el-button-group{margin-left:10px}",""])},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Botones comúnmente usados.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Plain\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Round\n Primary\n Success\n Info\n Warning\n Danger\n
    \n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",[t("el-button",[s._v("Default")]),t("el-button",{attrs:{type:"primary"}},[s._v("Primary")]),t("el-button",{attrs:{type:"success"}},[s._v("Success")]),t("el-button",{attrs:{type:"info"}},[s._v("Info")]),t("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),t("el-button",{attrs:{type:"danger"}},[s._v("Danger")])],1),t("div",{staticStyle:{margin:"20px 0"}},[t("el-button",{attrs:{plain:""}},[s._v("Plain")]),t("el-button",{attrs:{type:"primary",plain:""}},[s._v("Primary")]),t("el-button",{attrs:{type:"success",plain:""}},[s._v("Success")]),t("el-button",{attrs:{type:"info",plain:""}},[s._v("Info")]),t("el-button",{attrs:{type:"warning",plain:""}},[s._v("Warning")]),t("el-button",{attrs:{type:"danger",plain:""}},[s._v("Danger")])],1),t("div",[t("el-button",{attrs:{round:""}},[s._v("Round")]),t("el-button",{attrs:{type:"primary",round:""}},[s._v("Primary")]),t("el-button",{attrs:{type:"success",round:""}},[s._v("Success")]),t("el-button",{attrs:{type:"info",round:""}},[s._v("Info")]),t("el-button",{attrs:{type:"warning",round:""}},[s._v("Warning")]),t("el-button",{attrs:{type:"danger",round:""}},[s._v("Danger")])],1)]),t("p",[s._v("Use "),t("code",[s._v("type")]),s._v(", "),t("code",[s._v("plain")]),s._v(" y "),t("code",[s._v("round")]),s._v(" para definir estilos a los botones.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Primary"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("Success"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("Info"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 20px 0"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Plain"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Primary"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Success"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Info"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Warning"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Danger"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Round"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Primary"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Success"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Info"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Warning"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Danger"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Plain\n Primary\n Success\n Info\n Warning\n Danger\n
    \n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",[t("el-button",{attrs:{disabled:""}},[s._v("Default")]),t("el-button",{attrs:{type:"primary",disabled:""}},[s._v("Primary")]),t("el-button",{attrs:{type:"success",disabled:""}},[s._v("Success")]),t("el-button",{attrs:{type:"info",disabled:""}},[s._v("Info")]),t("el-button",{attrs:{type:"warning",disabled:""}},[s._v("Warning")]),t("el-button",{attrs:{type:"danger",disabled:""}},[s._v("Danger")])],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-button",{attrs:{plain:"",disabled:""}},[s._v("Plain")]),t("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[s._v("Primary")]),t("el-button",{attrs:{type:"success",plain:"",disabled:""}},[s._v("Success")]),t("el-button",{attrs:{type:"info",plain:"",disabled:""}},[s._v("Info")]),t("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[s._v("Warning")]),t("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[s._v("Danger")])],1)]),t("p",[s._v("Use el atributo "),t("code",[s._v("disabled")]),s._v(" para determinar si un botón esta deshabilitado. Acepta un valor "),t("code",[s._v("Boolean")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Primary"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Success"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Warning"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Danger"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Plain"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Primary"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Success"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Warning"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Danger"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Botones sin borde ni fondo.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Text Button\nText Button\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"text"}},[s._v("Text Button")]),t("el-button",{attrs:{type:"text",disabled:""}},[s._v("Text Button")])],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("Text Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\nUpload\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[s._v("Search")]),t("el-button",{attrs:{type:"primary"}},[s._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1),t("p",[s._v("Use el atributo "),t("code",[s._v("icon")]),s._v(" para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag "),t("code",[s._v("")]),s._v(". También se pueden usar iconos custom.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),s._v("Search"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Previous Page\n Next Page\n\n\n \n \n \n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[s._v("Previous Page")]),t("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1),t("p",[s._v("Use el tag "),t("code",[s._v("")]),s._v(" para agrupar sus botones.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-left"')]),s._v(">")]),s._v("Previous Page"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Next Page"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-right el-icon-right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Loading\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"primary",loading:!0}},[s._v("Loading")])],1),t("p",[s._v("Ajuste el atributo "),t("code",[s._v("loading")]),s._v(" a "),t("code",[s._v("true")]),s._v(" para mostrar el estado de descarga.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":loading")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("Loading"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Medium\n Small\n Mini\n
    \n
    \n Default\n Medium\n Small\n Mini\n
    \n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",[t("el-button",[s._v("Default")]),t("el-button",{attrs:{size:"medium"}},[s._v("Medium")]),t("el-button",{attrs:{size:"small"}},[s._v("Small")]),t("el-button",{attrs:{size:"mini"}},[s._v("Mini")])],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-button",{attrs:{round:""}},[s._v("Default")]),t("el-button",{attrs:{size:"medium",round:""}},[s._v("Medium")]),t("el-button",{attrs:{size:"small",round:""}},[s._v("Small")]),t("el-button",{attrs:{size:"mini",round:""}},[s._v("Mini")])],1)]),t("p",[s._v("Use el atributo "),t("code",[s._v("size")]),s._v(" para setear tamaños adicionales con "),t("code",[s._v("medium")]),s._v(", "),t("code",[s._v("small")]),s._v(" or "),t("code",[s._v("mini")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Medium"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Small"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("Mini"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Medium"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Small"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Mini"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"boton-deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-deshabilitado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Botón deshabilitado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("El atributo "),t("code",{pre:!0},[s._v("disabled")]),s._v(" determina su un botón esta deshabilitado.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"boton-de-texto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-texto","aria-hidden":"true"}},[s._v("¶")]),s._v(" Botón de texto")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"boton-icono"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-icono","aria-hidden":"true"}},[s._v("¶")]),s._v(" Botón icono")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"grupo-de-botones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-botones","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grupo de botones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"boton-de-descarga"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-descarga","aria-hidden":"true"}},[s._v("¶")]),s._v(" Botón de descarga")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tamaños")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del botón")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de botón")]),t("td",[s._v("string")]),t("td",[s._v("primary / success / warning / danger / info / text")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("plain")]),t("td",[s._v("determinar si es o no un botón plano")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("round")]),t("td",[s._v("determinar si es o no un botón redondo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("loading")]),t("td",[s._v("determinar si es o no un botón de descarga")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("deshabilitar el botón")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("icon")]),t("td",[s._v("nombre de la clase del icono")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("autofocus")]),t("td",[s._v("misma funcionalidad que la nativa "),t("code",{pre:!0},[s._v("autofocus")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("native-type")]),t("td",[s._v("misma funcionalidad que la nativa "),t("code",{pre:!0},[s._v("type")])]),t("td",[s._v("string")]),t("td",[s._v("button / submit / reset")]),t("td",[s._v("button")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1284)},function(s,a,t){"use strict";function l(s){t(1285)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1287),n=t.n(e),r=t(1288),v=t(0),c=l,_=v(n.a,r.a,!1,c,"data-v-caf4f932",null);a.default=_.exports},function(s,a,t){var l=t(1286);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("deb2d6b2",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,'.clearfix[data-v-caf4f932]:after{clear:both}.text[data-v-caf4f932]{font-size:14px}.time[data-v-caf4f932]{font-size:13px;color:#999}.bottom[data-v-caf4f932]{margin-top:13px;line-height:12px}.item[data-v-caf4f932]{margin-bottom:18px}.button[data-v-caf4f932]{padding:0;float:right}.image[data-v-caf4f932]{width:100%;display:block}.clearfix[data-v-caf4f932]:after,.clearfix[data-v-caf4f932]:before{display:table;content:""}.box-card[data-v-caf4f932]{width:480px}',""])},function(s,a,t){"use strict";a.__esModule=!0;var l=t(112),e=function(s){return s&&s.__esModule?s:{default:s}}(l);a.default={data:function(){return{currentDate:e.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,l=s._self._c||a;return l("section",[s._m(0),s._m(1),s._m(2),s._m(3),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n Card name\n Operation button\n
    \n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,style:'\n .text {\n font-size: 14px;\n }\n\n .item {\n margin-bottom: 18px;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n .clearfix:after {\n clear: both\n }\n\n .box-card {\n width: 480px;\n }\n'}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[l("span",[s._v("Card name")]),l("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[s._v("Operation button")])],1),s._l(4,function(a){return l("div",{key:a,staticClass:"text item"},[s._v("\n "+s._s("List item "+a)+"\n ")])})],2)],1),l("p",[s._v("Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su contenido depende de un slot con nombre.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"header"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Card name"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"float: right; padding: 3px 0"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("Operation button"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"o in 4"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"text item"')]),s._v(">")]),s._v("\n {{'List item ' + o }}\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),l("span",{attrs:{class:"css"}},[s._v("\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".text")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":before")]),s._v(",\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": table;\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("content")]),s._v(": "),l("span",{attrs:{class:"hljs-string"}},[s._v('""')]),s._v(";\n }\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("clear")]),s._v(": both\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".box-card")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("480px")]),s._v(";\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),l("p",[s._v("La parte de la cabecera puede omitirse.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,style:"\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .box-card {\n width: 480px;\n }\n"}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(a){return l("div",{key:a,staticClass:"text item"},[s._v("\n "+s._s("List item "+a)+"\n ")])}))],1),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"o in 4"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"text item"')]),s._v(">")]),s._v("\n {{'List item ' + o }}\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),l("span",{attrs:{class:"css"}},[s._v("\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".text")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(" "),l("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".box-card")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("480px")]),s._v(";\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),l("p",[s._v("Muestre un contenido más rico añadiendo algunas configuraciones.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n
    \n Yummy hamburger\n
    \n \n Operating button\n
    \n
    \n     \n     \n    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n currentDate: new Date()\n };\n }\n}\n",style:'\n .time {\n font-size: 13px;\n color: #999;\n }\n \n .bottom {\n margin-top: 13px;\n line-height: 12px;\n }\n\n .button {\n padding: 0;\n float: right;\n }\n\n .image {\n width: 100%;\n display: block;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n \n .clearfix:after {\n clear: both\n }\n'}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-row",s._l(2,function(a,e){return l("el-col",{key:a,attrs:{span:8,offset:e>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:t(628)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("Yummy hamburger")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("Operating button")])],1)])])],1)}))],1),l("p",[s._v("El atributo "),l("code",[s._v("body-style")]),s._v(" define el estilo CSS del "),l("code",[s._v("body")]),s._v(" personalizado. Este ejemplo también utiliza "),l("code",[s._v("el-col")]),s._v(" para el layout.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"(o, index) in 2"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v(":body-style")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"image"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Yummy hamburger"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("time")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"time"')]),s._v(">")]),s._v("{{ currentDate }}"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),l("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),l("span",{attrs:{class:"hljs-string"}},[s._v('"button"')]),s._v(">")]),s._v("Operating button"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),l("span",{attrs:{class:"css"}},[s._v("\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".time")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("13px")]),s._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("#999")]),s._v(";\n }\n \n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bottom")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("13px")]),s._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".button")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("float")]),s._v(": right;\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".image")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),l("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":before")]),s._v(",\n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": table;\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("content")]),s._v(": "),l("span",{attrs:{class:"hljs-string"}},[s._v('""')]),s._v(";\n }\n \n "),l("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[s._v("clear")]),s._v(": both\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("<"),l("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),l("span",{attrs:{class:"javascript"}},[s._v("\n"),l("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),l("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[s._v("currentDate")]),s._v(": "),l("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),l("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("()\n };\n }\n}\n")]),l("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Muestra información dentro de un contenedor "),t("code",{pre:!0},[s._v("card")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso Basico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("Card")]),s._v(" incluye titulo, contenido y operaciones.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"card-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-simple","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card simple")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"con-imagenes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-imagenes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Con imágenes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("header")]),t("td",[s._v("Titulo del card. También acepta DOM pasado por "),t("code",{pre:!0},[s._v("slot#header")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("body-style")]),t("td",[s._v("Estilo CSS del cuerpo")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{ padding: '20px' }")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1290)},function(s,a,t){"use strict";function l(s){t(1291)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1293),n=t.n(e),r=t(1294),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1292);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("72d82b02",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-carousel .el-carousel__item:nth-child(2n+1){background-color:#d3dce6}.demo-carousel .block{padding:30px;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-carousel .block:last-child{border-right:none}.demo-carousel .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-carousel .el-carousel__container{text-align:center}.demo-carousel .el-carousel__item h3{color:#fff;font-size:18px;line-height:300px;margin:0}.demo-carousel .el-carousel__item:nth-child(2n){background-color:#99a9bf}.demo-carousel .small h3{font-size:14px;line-height:150px}.demo-carousel .medium h3{font-size:14px;line-height:200px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Presenta una serie de imágenes o textos en un espacio limitado")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 150px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Switch when indicator is hovered (default)")]),t("el-carousel",{attrs:{height:"150px"}},s._l(4,function(a){return t("el-carousel-item",{key:a},[t("h3",[s._v(s._s(a))])])}))],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Switch when indicator is clicked")]),t("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(a){return t("el-carousel-item",{key:a},[t("h3",[s._v(s._s(a))])])}))],1)]],2),t("p",[s._v("Combine "),t("code",[s._v("el-carousel")]),s._v(" con "),t("code",[s._v("el-carousel-item")]),s._v(", para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta "),t("code",[s._v("el-carousel-item")]),s._v(" . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije "),t("code",[s._v("trigger")]),s._v(" para "),t("code",[s._v("click")]),s._v(", si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is hovered (default)"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"150px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is clicked"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"150px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("150px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Los indicadores de paginacion pueden mostrarse fuera del carrusel")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(a){return t("el-carousel-item",{key:a},[t("h3",[s._v(s._s(a))])])}))]],2),t("p",[s._v("El atributo "),t("code",[s._v("indicator-position")]),s._v(" determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de "),t("code",[s._v("indicator-position")]),s._v(" a "),t("code",[s._v("outside")]),s._v(" los mueve hacia fuera; en cambio "),t("code",[s._v("indicator-position")]),s._v(" a "),t("code",[s._v("none")]),s._v(" los oculta.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("indicator-position")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"outside"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("300px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Puede definir cuando se visualizan las flechas")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(a){return t("el-carousel-item",{key:a},[t("h3",[s._v(s._s(a))])])}))]],2),t("p",[s._v("El atributo "),t("code",[s._v("arrow")]),s._v(" determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste "),t("code",[s._v("arrow")]),s._v(" a "),t("code",[s._v("always")]),s._v(" o "),t("code",[s._v("never")]),s._v(" para mostrar u ocultar las flechas permanentemente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":interval")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"5000"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("arrow")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"always"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("300px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 200px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(a){return t("el-carousel-item",{key:a},[t("h3",[s._v(s._s(a))])])}))]],2),t("p",[s._v("Ajuste "),t("code",[s._v("type")]),s._v(" a "),t("code",[s._v("card")]),s._v(" para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":interval")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4000"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in 6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"indicadores"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicadores","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indicadores")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"flechas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#flechas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Flechas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"modo-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modo-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Modo Card")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo "),t("code",{pre:!0},[s._v("card")]),s._v(" para carrusel.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de Carousel")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripcion")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("height")]),t("td",[s._v("Alto del carrusel")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("initial-index")]),t("td",[s._v("Indice del slider inicial activo (empieza desde 0)")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("trigger")]),t("td",[s._v("Evento que muestra los indicadores")]),t("td",[s._v("string")]),t("td",[s._v("hover/click")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("autoplay")]),t("td",[s._v("Si se enlazan automáticamente las diapositivas")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("interval")]),t("td",[s._v("Intervalo del auto loop, en milisegundos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("3000")])]),t("tr",[t("td",[s._v("indicator-position")]),t("td",[s._v("Posición del indicador de paginación")]),t("td",[s._v("string")]),t("td",[s._v("outside/none")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("arrow")]),t("td",[s._v("Cuando se muestran las flechas")]),t("td",[s._v("string")]),t("td",[s._v("always/hover/never")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("Tipo de carrusel")]),t("td",[s._v("string")]),t("td",[s._v("card")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos de Carousel")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("Se dispara cuando el slider activo cambia")]),t("td",[s._v("Indice del nuevo slider activo, indice del anterior slider activo.")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Metodos de Carousel")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodos")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("setActiveItem")]),t("td",[s._v("Cambio manual de slider")]),t("td",[s._v("indice del slider al que se va a cambiar, empezando por 0; o el "),t("code",{pre:!0},[s._v("name")]),s._v(" del "),t("code",{pre:!0},[s._v("el-carousel-item")]),s._v(" correspondiente")])]),t("tr",[t("td",[s._v("prev")]),t("td",[s._v("Cambia al slider anterior")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("next")]),t("td",[s._v("Cambia al slider siguiente")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-carousel-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel-item","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de Carousel-Item")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("name")]),t("td",[s._v("Nombre del item que puede ser usado en "),t("code",{pre:!0},[s._v("setActiveItem")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("Texto que se mostrara en el indicador de paginacion correspondiente")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1296)},function(s,a,t){"use strict";function l(s){t(1297)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1299),n=t.n(e),r=t(1300),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1298);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("e330c9e2",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-cascader .block:last-child{border-right:none}.demo-cascader .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"},options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["component","data","tag"]}},created:function(){this.optionsWithDisabled=JSON.parse(JSON.stringify(this.options)),this.optionsWithDisabled[0].disabled=!0},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[s.length-1].style.padding="0"})},methods:{handleItemChange:function(s){var a=this;console.log("active item:",s),setTimeout(function(t){s.indexOf("California")>-1&&!a.options2[0].cities.length?a.options2[0].cities=[{label:"Los Angeles"}]:s.indexOf("Florida")>-1&&!a.options2[1].cities.length&&(a.options2[1].cities=[{label:"Orlando"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Si las opciones tienen una estructura jerárquica clara, Cascader puede utilizarse para visualizarlas y seleccionarlas.")]),s._m(1),t("p",[s._v("Existen dos maneras de expandir los elementos hijo de la opción.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Child options expand when clicked (default)\n \n \n
    \n
    \n Child options expand when hovered\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions: [],\n selectedOptions2: []\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Child options expand when clicked (default)")]),t("el-cascader",{attrs:{options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions,callback:function(a){s.selectedOptions=a},expression:"selectedOptions"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Child options expand when hovered")]),t("el-cascader",{attrs:{"expand-trigger":"hover",options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions2,callback:function(a){s.selectedOptions2=a},expression:"selectedOptions2"}})],1)]),t("p",[s._v("Al asignar al atributo "),t("code",[s._v("options")]),s._v(" un array de opciones, se genera un Cascader. El atributo "),t("code",[s._v("expand-trigger")]),s._v(" define cómo se expanden las opciones hijo. Este ejemplo también muestra el evento "),t("code",[s._v("change")]),s._v(" , cuyo parámetro es el valor de Cascader, un array formado por los valores de cada nivel seleccionado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when clicked (default)"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selectedOptions"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when hovered"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("expand-trigger")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selectedOptions2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectedOptions")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectedOptions2")]),s._v(": []\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n optionsWithDisabled: [{\n value: 'guide',\n label: 'Guide',\n disabled: true,\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),t("p",[s._v("En este ejemplo, el primer elemento del array "),t("code",[s._v("options")]),s._v(" tiene un campo "),t("code",[s._v("disabled: true")]),s._v(" , por lo que está desactivado. Por defecto, Cascader verifica el campo "),t("code",[s._v("disabled")]),s._v(" en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo "),t("code",[s._v("props")]),s._v(" (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de "),t("code",[s._v("value")]),s._v(", "),t("code",[s._v("label")]),s._v(" y "),t("code",[s._v("children")]),s._v(" también se pueden personalizar de la misma manera.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("optionsWithDisabled")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puede mostrar sólo el último nivel en lugar de todos los niveles.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),t("p",[s._v("El atributo "),t("code",[s._v("show-all-levels")]),s._v(" define si se visualizan todos los niveles. Si es "),t("code",[s._v("false")]),s._v(", sólo se muestra el último nivel.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":show-all-levels")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n>")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions3: ['component', 'data', 'tag']\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(a){s.selectedOptions3=a},expression:"selectedOptions3"}})],1),t("p",[s._v("El valor por defecto se puede definir con un array.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selectedOptions3"')]),s._v("\n>")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectedOptions3")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v("]\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("También se pueden seleccionar las opciones del elemento padre.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),t("p",[s._v("Por defecto sólo se pueden seleccionar las opciones del último nivel. Al asignar "),t("code",[s._v("change-on-select")]),s._v(" a "),t("code",[s._v("true")]),s._v(", también se pueden seleccionar opciones en los niveles superiores.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("change-on-select")]),s._v("\n>")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el elemento padre o se pasa el ratón sobre el.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n label: 'California',\n cities: []\n }, {\n label: 'Florida',\n cities: []\n }],\n props: {\n value: 'label',\n children: 'cities'\n }\n };\n },\n\n methods: {\n handleItemChange(val) {\n console.log('active item:', val);\n setTimeout(_ => {\n if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n this.options2[0].cities = [{\n label: 'Los Angeles'\n }];\n } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n this.options2[1].cities = [{\n label: 'Orlando'\n }];\n }\n }, 300);\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),t("p",[s._v("En este ejemplo, el array de opciones no tiene datos de ciudades cuando se inicializa. Con el evento "),t("code",[s._v("active-item-change")]),s._v(", puede cargar dinámicamente las ciudades de un estado específico. Además, este ejemplo también demuestra cómo se utilizan los"),t("code",[s._v("props")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"options2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@active-item-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleItemChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v("\n>")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options2")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": []\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": []\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cities'")]),s._v("\n }\n };\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleItemChange(val) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-string"}},[s._v("'active item:'")]),s._v(", val);\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (val.indexOf("),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(") > "),t("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(" && !"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].cities.length) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].cities = [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v("\n }];\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (val.indexOf("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(") > "),t("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(" && !"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("].cities.length) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("].cities = [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Orlando'")]),s._v("\n }];\n }\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("300")]),s._v(");\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Buscar y seleccionar opciones con una palabra clave.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Only options of the last level can be selected\n \n
    \n
    \n Options of all levels can be selected\n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Only options of the last level can be selected")]),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:""}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Options of all levels can be selected")]),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:"","change-on-select":""}})],1)]),t("p",[s._v("Añadir "),t("code",[s._v("filterable")]),s._v(" a "),t("code",[s._v("el-cascader")]),s._v(" permite filtrar")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Only options of the last level can be selected"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Try searching: Guide"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n >")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Options of all levels can be selected"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Try searching: Guide"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("change-on-select")]),s._v("\n >")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"opcion-disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opcion-disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Opcion Disabled")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Para desactivar una opción configure un campo "),t("code",{pre:!0},[s._v("disabled")]),s._v(" en el objeto de opción.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"mostrar-solo-el-ultimo-nivel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mostrar-solo-el-ultimo-nivel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Mostrar sólo el último nivel")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"con-valor-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-valor-por-defecto","aria-hidden":"true"}},[s._v("¶")]),s._v(" Con valor por defecto")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"change-on-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Change on select")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"carga-dinamica-de-elementos-hijos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-dinamica-de-elementos-hijos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carga dinamica de elementos hijos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"filtrable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filtrable")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Opciones")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("options")]),t("td",[s._v("datos de las opciones")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("opciones de configuracion, mire la tabla siguiente")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("valor seleccionado")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase para el Cascader's dropdown")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("input placeholder")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Select")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si Cascader esta disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("si se puede borrar el valor seleccionado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("expand-trigger")]),t("td",[s._v("evento del elemento actual para expandirse.")]),t("td",[s._v("string")]),t("td",[s._v("click / hover")]),t("td",[s._v("click")])]),t("tr",[t("td",[s._v("show-all-levels")]),t("td",[s._v("si mostrar todos los niveles del valor seleccionado en la entrada")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("filterable")]),t("td",[s._v("si se pueden buscar las opciones")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("debounce")]),t("td",[s._v("retardo al escribir la palabra clave del filtro, en milisegundos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])]),t("tr",[t("td",[s._v("change-on-select")]),t("td",[s._v("si se permite seleccionar una opción de cualquier nivel")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del input")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("before-filter")]),t("td",[s._v("funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve "),t("code",{pre:!0},[s._v("false")]),s._v(" o se devuelve una "),t("code",{pre:!0},[s._v("Promise")]),s._v(" y luego es rechazada, el filtrado será abortado.")]),t("td",[s._v("function(value)")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("especifica qué clave del elemento de la opción se utiliza como etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("especifica qué clave del elemento de la opción se utiliza como valor")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("children")]),t("td",[s._v("especifica qué clave del elemento de la opción se utiliza como hijo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica qué clave del elemento de la opción indica si está deshabilitada")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor cambia")]),t("td",[s._v("valor")])]),t("tr",[t("td",[s._v("active-item-change")]),t("td",[s._v("se dispara cuando cambia la opción activa, sólo funciona cuando "),t("code",{pre:!0},[s._v("change-on-select")]),s._v(" es "),t("code",{pre:!0},[s._v("false")]),s._v(".")]),t("td",[s._v("array de opciones activas")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("se dispara cuando Cascader pierde el foco")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("se dispara cuando Cascader obtiene el foco")]),t("td",[s._v("(event: Event)")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1302)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1303),e=t.n(l),n=t(1304),r=t(0),v=r(e.a,n.a,!1,null,null,null);a.default=v.exports},function(s,a,t){"use strict";var l=["Shanghai","Beijing","Guangzhou","Shenzhen"];s.exports={data:function(){return{checkList:["seleccionado y deshabilitado","Opción A"],checked:!0,checked1:!1,checked2:!0,checked3:!0,checked4:!1,checked5:!1,checked6:!0,isValid:"valid",checkAll:!1,cities:l,checkedCities:["Shanghai","Beijing"],checkedCities1:["Shanghai","Beijing"],isIndeterminate:!0,checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],checkboxGroup5:[],checkboxGroup6:[]}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s?l:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){var a=s.length;this.checkAll=a===this.cities.length,this.isIndeterminate=a>0&&a\n \x3c!-- `checked` debe ser true o false --\x3e\n Opción\n\n\n',script:"\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-checkbox",{model:{value:s.checked,callback:function(a){s.checked=a},expression:"checked"}},[s._v("Opción")])]],2),t("p",[s._v("Define "),t("code",[s._v("v-model")]),s._v("(enlaza la variable) en "),t("code",[s._v("el-checkbox")]),s._v(". El valor por defecto es un "),t("code",[s._v("Boolean")]),s._v(" para un "),t("code",[s._v("checkbox")]),s._v(", y se convierte en "),t("code",[s._v("true")]),s._v(" cuando este es seleccionado. El contenido dentro del tag "),t("code",[s._v("el-checkbox")]),s._v(" se convierte en la descripción al costado del botón del checkbox.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- `checked` debe ser true o false --\x3e")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checked"')]),s._v(">")]),s._v("Opción"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checked")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Estado deshabilitado para el checkbox.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(a){s.checked1=a},expression:"checked1"}},[s._v("Opción")]),t("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(a){s.checked2=a},expression:"checked2"}},[s._v("Opción")])]],2),t("p",[s._v("Setear el atributo "),t("code",[s._v("disabled")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checked1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Opción"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checked2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Opción"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checked1")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checked2")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n checkList: ['Seleccionado y deshabilitado','Opción A']\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-checkbox-group",{model:{value:s.checkList,callback:function(a){s.checkList=a},expression:"checkList"}},[t("el-checkbox",{attrs:{label:"Opción A"}}),t("el-checkbox",{attrs:{label:"Opción B"}}),t("el-checkbox",{attrs:{label:"Opción C"}}),t("el-checkbox",{attrs:{label:"disabled",disabled:""}}),t("el-checkbox",{attrs:{label:"Seleccionado y deshabilitado",disabled:""}})],1)]],2),t("p",[s._v("El elemento "),t("code",[s._v("checkbox-group")]),s._v(" puede manejar multiples checkboxes en un grupo usando "),t("code",[s._v("v-model")]),s._v(" el cuál está enlazado a un "),t("code",[s._v("Array")]),s._v(". Dentro del elemento "),t("code",[s._v("el-checkbox")]),s._v(", "),t("code",[s._v("label")]),s._v(" es el valor del checkbox. Si en ese tag no hay contenido anidado, "),t("code",[s._v("label")]),s._v(" va a ser mostrado como la descripción al lado del botón del checkbox. "),t("code",[s._v("label")]),s._v(" también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkList"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Opción A"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Opción B"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Opción C"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Seleccionado y deshabilitado"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkList")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'Seleccionado y deshabilitado'")]),s._v(","),t("span",{attrs:{class:"hljs-string"}},[s._v("'Opción A'")]),s._v("]\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkAll: false,\n checkedCities: ['Shanghai', 'Beijing'],\n cities: cityOptions,\n isIndeterminate: true\n };\n },\n methods: {\n handleCheckAllChange(val) {\n this.checkedCities = val ? cityOptions : [];\n this.isIndeterminate = false;\n },\n handleCheckedCitiesChange(value) {\n let checkedCount = value.length;\n this.checkAll = checkedCount === this.cities.length;\n this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-checkbox",{attrs:{indeterminate:s.isIndeterminate},on:{change:s.handleCheckAllChange},model:{value:s.checkAll,callback:function(a){s.checkAll=a},expression:"checkAll"}},[s._v("Marcar todos")]),t("div",{staticStyle:{margin:"15px 0"}}),t("el-checkbox-group",{on:{change:s.handleCheckedCitiesChange},model:{value:s.checkedCities,callback:function(a){s.checkedCities=a},expression:"checkedCities"}},s._l(s.cities,function(a){return t("el-checkbox",{key:a,attrs:{label:a}},[s._v(s._s(a))])}))]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":indeterminate")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"isIndeterminate"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkAll"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("Marcar todos"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 15px 0;"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkedCities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkAll")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkedCities")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions,\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("isIndeterminate")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCheckAllChange(val) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".checkedCities = val ? cityOptions : [];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".isIndeterminate = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n },\n handleCheckedCitiesChange(value) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" checkedCount = value.length;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".checkAll = checkedCount === "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cities.length;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(" && checkedCount < "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cities.length;\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkedCities1: ['Shanghai', 'Beijing'],\n cities: cityOptions\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-checkbox-group",{attrs:{min:1,max:2},model:{value:s.checkedCities1,callback:function(a){s.checkedCities1=a},expression:"checkedCities1"}},s._l(s.cities,function(a){return t("el-checkbox",{key:a,attrs:{label:a}},[s._v(s._s(a))])}))]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" \n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkedCities1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkedCities1")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Checkbox con estilo tipo Botón.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n export default {\n data () {\n return {\n checkboxGroup1: ['Shanghai'],\n checkboxGroup2: ['Shanghai'],\n checkboxGroup3: ['Shanghai'],\n checkboxGroup4: ['Shanghai'],\n cities: cityOptions\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(a){s.checkboxGroup1=a},expression:"checkboxGroup1"}},s._l(s.cities,function(a){return t("el-checkbox-button",{key:a,attrs:{label:a}},[s._v(s._s(a))])}))],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox-group",{attrs:{size:"medium"},model:{value:s.checkboxGroup2,callback:function(a){s.checkboxGroup2=a},expression:"checkboxGroup2"}},s._l(s.cities,function(a){return t("el-checkbox-button",{key:a,attrs:{label:a}},[s._v(s._s(a))])}))],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup3,callback:function(a){s.checkboxGroup3=a},expression:"checkboxGroup3"}},s._l(s.cities,function(a){return t("el-checkbox-button",{key:a,attrs:{label:a,disabled:"Beijing"===a}},[s._v(s._s(a))])}))],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup4,callback:function(a){s.checkboxGroup4=a},expression:"checkboxGroup4"}},s._l(s.cities,function(a){return t("el-checkbox-button",{key:a,attrs:{label:a}},[s._v(s._s(a))])}))],1)]],2),t("p",[s._v("Sólo debe cambiar el elemento "),t("code",[s._v("el-checkbox")]),s._v(" por el elemento "),t("code",[s._v("el-checkbox-button")]),s._v(". También proveemos el atributo "),t("code",[s._v("size")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"city === 'Beijing'\"")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup1")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup2")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup3")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup4")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n checked3: true,\n checked4: false,\n checked5: false,\n checked6: true,\n checkboxGroup5: [],\n checkboxGroup6: []\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-checkbox",{attrs:{label:"Opción1",border:""},model:{value:s.checked3,callback:function(a){s.checked3=a},expression:"checked3"}}),t("el-checkbox",{attrs:{label:"Opción2",border:""},model:{value:s.checked4,callback:function(a){s.checked4=a},expression:"checked4"}})],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox",{attrs:{label:"Opción1",border:"",size:"medium"},model:{value:s.checked5,callback:function(a){s.checked5=a},expression:"checked5"}}),t("el-checkbox",{attrs:{label:"Opción2",border:"",size:"medium"},model:{value:s.checked6,callback:function(a){s.checked6=a},expression:"checked6"}})],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup5,callback:function(a){s.checkboxGroup5=a},expression:"checkboxGroup5"}},[t("el-checkbox",{attrs:{label:"Opción1",border:""}}),t("el-checkbox",{attrs:{label:"Opción2",border:"",disabled:""}})],1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup6,callback:function(a){s.checkboxGroup6=a},expression:"checkboxGroup6"}},[t("el-checkbox",{attrs:{label:"Opción1",border:""}}),t("el-checkbox",{attrs:{label:"Opción2",border:""}})],1)],1)]],2),t("p",[s._v("El atributo "),t("code",[s._v("border")]),s._v(" agrega un borde a los Checkboxes.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checked3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Opción1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checked4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Opción2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checked5"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Opción1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checked6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Opción2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup5"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Opción1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Opción2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Opción1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Opción2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checked3")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checked4")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checked5")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checked6")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup5")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup6")]),s._v(": []\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"estado-deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estado-deshabilitado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Estado Deshabilitado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"grupo-de-checkboxes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-checkboxes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grupo de Checkboxes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"indeterminado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indeterminado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("La propiedad "),t("code",{pre:!0},[s._v("indeterminate")]),s._v(" puede ser usada para generar el efecto de marcar todos (check all).")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"cantidad-minima-maxima-de-elementos-seleccionados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cantidad-minima-maxima-de-elementos-seleccionados","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cantidad Mínima / Máxima de elementos seleccionados")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Las propiedades "),t("code",{pre:!0},[s._v("min")]),s._v(" y "),t("code",{pre:!0},[s._v("max")]),s._v(" pueden limitar la cantidad de elementos seleccionados.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"estilo-tipo-boton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-tipo-boton","aria-hidden":"true"}},[s._v("¶")]),s._v(" Estilo tipo Botón")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Con bordes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de Checkbox")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("valor del Checkbox si es usado dentro de un tag "),t("code",{pre:!0},[s._v("checkbox-group")])]),t("td",[s._v("string / number / boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("true-label")]),t("td",[s._v("valor del Checkbox si está marcado")]),t("td",[s._v("string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("false-label")]),t("td",[s._v("valor del Checkbox si no está marcado")]),t("td",[s._v("string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica si el Checkbox está deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("border")]),t("td",[s._v("especifica si agrega un borde alrededor del Checkbox")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del Checkbox, sólo funciona si "),t("code",{pre:!0},[s._v("border")]),s._v(" es true")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("atributo 'name' nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("checked")]),t("td",[s._v("especifica si el Checkbox está marcado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("indeterminate")]),t("td",[s._v("similar a "),t("code",{pre:!0},[s._v("indeterminate")]),s._v(" en el checkbox nativo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos-de-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos de Checkbox")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se ejecuta cuando el valor enlazado cambia")]),t("td",[s._v("el valor actualizado")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de Checkbox-group")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por Defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño de los checkboxes de tipo botón o los checkboxes con border")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica si los checkboxes anidados están deshabilitados")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("cantidad mínima de checkboxes que deben ser marcados")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("cantidad máxima de checkboxes que pueden ser marcados")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("color de fuente cuando el botón está activo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#ffffff")])]),t("tr",[t("td",[s._v("fill")]),t("td",[s._v("color de border y de fondo cuando el botón está activo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#409EFF")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos-de-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos de Checkbox-group")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de Evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se ejecuta cuando el valor enlazado cambia")]),t("td",[s._v("el valor actualizado")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-checkbox-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de Checkbox-button")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("valor del checkbox cuando es usado dentro de un "),t("code",{pre:!0},[s._v("checkbox-group")])]),t("td",[s._v("string / number / boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("true-label")]),t("td",[s._v("valor del checkbox si este está marcado")]),t("td",[s._v("string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("false-label")]),t("td",[s._v("valor del checkbox si este no está marcado")]),t("td",[s._v("string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica si el checkbox está deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("atributo 'name' del checbox nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("checked")]),t("td",[s._v("si el checkbox está marcado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1306)},function(s,a,t){"use strict";function l(s){t(1307)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1309),n=t.n(e),r=t(1310),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1308);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("c948d9dc",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Use Collapse para almacenar contenidos.")]),s._m(1),t("p",[s._v("Puede expandir varios paneles")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeNames: ['1']\n };\n },\n methods: {\n handleChange(val) {\n console.log(val);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(a){s.activeNames=a},expression:"activeNames"}},[t("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[t("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;")]),t("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[t("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[t("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),t("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[t("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"activeNames"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Consistency"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("activeNames")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("]\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(val) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(val);\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("En modo acordeón sólo un panel puede ser expandido a la vez")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeName: '1'\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(a){s.activeName=a},expression:"activeName"}},[t("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[t("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;")]),t("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[t("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[t("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),t("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[t("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),t("p",[s._v("Activa el modo acordeón usado el atributo "),t("code",[s._v("accordion")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"activeName"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Consistency"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-collapse",{attrs:{accordion:""}},[t("el-collapse-item",{attrs:{name:"1"}},[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("\n Consistency"),t("i",{staticClass:"header-icon el-icon-information"})]),t("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;")]),t("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),t("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[t("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[t("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),t("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[t("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n Consistency"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"header-icon el-icon-information"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("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;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"acordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Acordeón")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"titulo-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#titulo-personalizado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Título personalizado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Además de usar el atributo "),t("code",{pre:!0},[s._v("title")]),s._v(", se puede personalizar el título del panel con slots con nombre, esto hace posible agregar contenido personalizado, por ejemplo: iconos.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de Collapse")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("accordion")]),t("td",[s._v("especifica si activa el modo acordeón")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("panel activo")]),t("td",[s._v("string (modo acordeón)/array (No modo acordeón)")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos de Collapse")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de Evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando los paneles activos cambian")]),t("td",[s._v("activeNames: array (No modo acordeón)/string (modo acordeón)")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-collapse-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse-item","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de Collapse Item")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("name")]),t("td",[s._v("identificador único del panel")]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("título del panel")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1312)},function(s,a,t){"use strict";function l(s){t(1313)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1315),n=t.n(e),r=t(1316),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1314);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("040f519f",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-color-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-color-picker .block:last-child{border-right:none}.demo-color-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-color-picker .el-color-picker+.el-color-picker{margin-left:20px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{color1:"#409EFF",color2:null,color3:"rgba(19, 206, 102, 0.8)",color4:"#409EFF"}},mounted:function(){this.$nextTick(function(){document.querySelectorAll(".source")[0].style.padding="0"})}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("ColorPicker es un selector de color que soporta varios formatos de color.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Especifica valor por defecto\n \n
    \n
    \n No especifica valor por defecto\n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n color1: '#409EFF',\n color2: null\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Especifica valor por defecto")]),t("el-color-picker",{model:{value:s.color1,callback:function(a){s.color1=a},expression:"color1"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("No especifica valor por defecto")]),t("el-color-picker",{model:{value:s.color2,callback:function(a){s.color2=a},expression:"color2"}})],1)]),t("p",[s._v("ColorPicker requiere una variable de tipo "),t("code",[s._v("string")]),s._v(" para ser enlazada a "),t("code",[s._v("v-model")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Especifica valor por defecto"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"color1"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("No especifica valor por defecto"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"color2"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("color1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'#409EFF'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("color2")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n color3: 'rgba(19, 206, 102, 0.8)'\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(a){s.color3=a},expression:"color3"}})],1),t("p",[s._v("ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo "),t("code",[s._v("show-alpha")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"color3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-alpha")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("color3")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n color4: '#409EFF'\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-color-picker",{model:{value:s.color4,callback:function(a){s.color4=a},expression:"color4"}}),t("el-color-picker",{attrs:{size:"medium"},model:{value:s.color4,callback:function(a){s.color4=a},expression:"color4"}}),t("el-color-picker",{attrs:{size:"small"},model:{value:s.color4,callback:function(a){s.color4=a},expression:"color4"}}),t("el-color-picker",{attrs:{size:"mini"},model:{value:s.color4,callback:function(a){s.color4=a},expression:"color4"}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("color4")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'#409EFF'")]),s._v("\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alpha")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica si se deshabilita el ColorPicker")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del ColorPicker")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("medium / small / mini")])]),t("tr",[t("td",[s._v("show-alpha")]),t("td",[s._v("especifica si se muestra el control deslizante para el valor alpha")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("color-format")]),t("td",[s._v("formato de color del "),t("code",{pre:!0},[s._v("v-model")])]),t("td",[s._v("string")]),t("td",[s._v("hsl / hsv / hex / rgb")]),t("td",[s._v("hex (si show-alpha es false)/ rgb (si show-alpha es true)")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase para el dropdown del ColorPicker")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de Evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor del input cambia")]),t("td",[s._v("valor del color")])]),t("tr",[t("td",[s._v("active-change")]),t("td",[s._v("se dispara cuando el actual color activo cambia")]),t("td",[s._v("valor del color activo")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1318)},function(s,a,t){"use strict";function l(s){t(1319)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1321),n=t(0),r=l,v=n(null,e.a,!1,r,null,null);a.default=v.exports},function(s,a,t){var l=t(1320);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("09e2e91e",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,'.demo-color-box{border-radius:4px;padding:20px;height:74px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-group .demo-color-box{border-radius:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-blue{background-color:#409eff}.bg-success{background-color:#13ce66}.bg-warning{background-color:#f7ba2a}.bg-danger{background-color:#ff4949}.bg-info{background-color:#909399}.bg-text-primary{background-color:#303133}.bg-text-regular{background-color:#606266}.bg-text-secondary{background-color:#909399}.bg-text-placeholder{background-color:#c0c4cc}.bg-border-base{background-color:#dcdfe6}.bg-border-light{background-color:#e4e7ed}.bg-border-lighter{background-color:#ebeef5}.bg-border-extra-light{background-color:#f2f6fc}[class*=" bg-border-"]{color:#303133}',""])},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.")]),s._m(1),t("p",[s._v("El color principal de Element es el azul brillante y amigable.")]),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box bg-blue"},[s._v("Azul"),t("div",{staticClass:"value"},[s._v("#409EFF")])])])],1),s._m(2),t("p",[s._v("Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).")]),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box bg-success"},[s._v("Éxito"),t("div",{staticClass:"value"},[s._v("#67C23A")])])]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box bg-warning"},[s._v("Precaución"),t("div",{staticClass:"value"},[s._v("#E6A23C")])])]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box bg-danger"},[s._v("Peligro"),t("div",{staticClass:"value"},[s._v("#F56C6C")])])]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box bg-info"},[s._v("Info"),t("div",{staticClass:"value"},[s._v("#909399")])])])],1),s._m(3),t("p",[s._v("Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.")]),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box bg-text-primary"},[s._v("Texto primario"),t("div",{staticClass:"value"},[s._v("#303133")])]),t("div",{staticClass:"demo-color-box bg-text-regular"},[s._v("Texto regular"),t("div",{staticClass:"value"},[s._v("#606266")])]),t("div",{staticClass:"demo-color-box bg-text-secondary"},[s._v("Texto secundario"),t("div",{staticClass:"value"},[s._v("#909399")])]),t("div",{staticClass:"demo-color-box bg-text-placeholder"},[s._v("Texto de placeholder"),t("div",{staticClass:"value"},[s._v("#C0C4CC")])])])]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box bg-border-base"},[s._v("Borde base"),t("div",{staticClass:"value"},[s._v("#DCDFE6")])]),t("div",{staticClass:"demo-color-box bg-border-light"},[s._v("Borde ligero"),t("div",{staticClass:"value"},[s._v("#E4E7ED")])]),t("div",{staticClass:"demo-color-box bg-border-lighter"},[s._v("Borde claro"),t("div",{staticClass:"value"},[s._v("#EBEEF5")])]),t("div",{staticClass:"demo-color-box bg-border-extra-light"},[s._v("Borde extra claro"),t("div",{staticClass:"value"},[s._v("#F2F6FC")])])])])],1)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"color-principal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-principal","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color principal")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"color-secundario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-secundario","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color secundario")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"color-neutro"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-neutro","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color neutro")])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1323)},function(s,a,t){"use strict";function l(s){t(1324)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1326),n=t.n(e),r=t(1327),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1325);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("6aa3db20",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,"#disenos-comunes+.demo-container>.source>.el-container:nth-child(7) .el-aside{line-height:320px}.el-footer,.el-header{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside{color:#333}#disenos-comunes+.demo-container .el-footer,#disenos-comunes+.demo-container .el-header{text-align:center}#disenos-comunes+.demo-container .el-aside{background-color:#d3dce6;text-align:center;line-height:200px}#disenos-comunes+.demo-container .el-main{background-color:#e9eef3;color:#333;text-align:center;line-height:160px}#disenos-comunes+.demo-container>.source>.el-container{margin-bottom:40px}#disenos-comunes+.demo-container>.source>.el-container:nth-child(5) .el-aside,#disenos-comunes+.demo-container>.source>.el-container:nth-child(6) .el-aside{line-height:260px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){var s={date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"};return{tableData:Array(20).fill(s)}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Componentes contenedores para iniciar una estructura básica de un sitio:")]),s._m(1),s._m(2),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Cabecera\n Principal\n\n\n\n Cabecera\n Principal\n Pie de página\n\n\n\n Barra lateral\n Principal\n\n\n\n Cabecera\n \n Barra lateral\n Principal\n \n\n\n\n Cabecera\n \n Barra lateral\n \n Principal\n Pie de página\n \n \n\n\n\n Barra lateral\n \n Cabecera\n Principal\n \n\n\n\n Barra lateral\n \n Cabecera\n Principal\n Pie de página\n \n\n\n\n',script:null,style:"\n .el-header, .el-footer {\n background-color: #B3C0D1;\n color: #333;\n text-align: center;\n line-height: 60px;\n }\n \n .el-aside {\n background-color: #D3DCE6;\n color: #333;\n text-align: center;\n line-height: 200px;\n }\n \n .el-main {\n background-color: #E9EEF3;\n color: #333;\n text-align: center;\n line-height: 160px;\n }\n \n body > .el-container {\n margin-bottom: 40px;\n }\n \n .el-container:nth-child(5) .el-aside,\n .el-container:nth-child(6) .el-aside {\n line-height: 260px;\n }\n \n .el-container:nth-child(7) .el-aside {\n line-height: 320px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-main",[s._v("Principal")])],1),t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-main",[s._v("Principal")]),t("el-footer",[s._v("Pie de página")])],1),t("el-container",[t("el-aside",{attrs:{width:"200px"}},[s._v("Barra lateral")]),t("el-main",[s._v("Principal")])],1),t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-container",[t("el-aside",{attrs:{width:"200px"}},[s._v("Barra lateral")]),t("el-main",[s._v("Principal")])],1)],1),t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-container",[t("el-aside",{attrs:{width:"200px"}},[s._v("Barra lateral")]),t("el-container",[t("el-main",[s._v("Principal")]),t("el-footer",[s._v("Pie de página")])],1)],1)],1),t("el-container",[t("el-aside",{attrs:{width:"200px"}},[s._v("Barra lateral")]),t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-main",[s._v("Principal")])],1)],1),t("el-container",[t("el-aside",{attrs:{width:"200px"}},[s._v("Barra lateral")]),t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-main",[s._v("Principal")]),t("el-footer",[s._v("Pie de página")])],1)],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Pie de página"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Barra lateral"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Barra lateral"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Barra lateral"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Pie de página"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Barra lateral"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Barra lateral"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Pie de página"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-header")]),s._v(", "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-footer")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#B3C0D1")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("60px")]),s._v(";\n }\n \n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#D3DCE6")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n }\n \n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-main")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#E9EEF3")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("160px")]),s._v(";\n }\n \n "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(" > "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n }\n \n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(5)")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(",\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(6)")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("260px")]),s._v(";\n }\n \n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(7)")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("320px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n \n \n \n \n View\n Add\n Delete\n \n \n Tom\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n\n',script:"\n export default {\n data() {\n const item = {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n };\n return {\n tableData: Array(20).fill(item)\n }\n }\n };\n",style:"\n .el-header {\n background-color: #B3C0D1;\n color: #333;\n line-height: 60px;\n }\n \n .el-aside {\n color: #333;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[t("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[t("el-menu",{attrs:{"default-openeds":["1","3"]}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{attrs:{slot:"title"},slot:"title"},[t("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),t("el-menu-item-group",[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("Group 1")]),t("el-menu-item",{attrs:{index:"1-1"}},[s._v("Option 1")]),t("el-menu-item",{attrs:{index:"1-2"}},[s._v("Option 2")])],2),t("el-menu-item-group",{attrs:{title:"Group 2"}},[t("el-menu-item",{attrs:{index:"1-3"}},[s._v("Option 3")])],1),t("el-submenu",{attrs:{index:"1-4"}},[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("Option4")]),t("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("Option 4-1")])],2)],2),t("el-submenu",{attrs:{index:"2"}},[t("template",{attrs:{slot:"title"},slot:"title"},[t("i",{staticClass:"el-icon-menu"}),s._v("Navigator Two")]),t("el-menu-item-group",[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("Group 1")]),t("el-menu-item",{attrs:{index:"2-1"}},[s._v("Option 1")]),t("el-menu-item",{attrs:{index:"2-2"}},[s._v("Option 2")])],2),t("el-menu-item-group",{attrs:{title:"Group 2"}},[t("el-menu-item",{attrs:{index:"2-3"}},[s._v("Option 3")])],1),t("el-submenu",{attrs:{index:"2-4"}},[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("Option 4")]),t("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("Option 4-1")])],2)],2),t("el-submenu",{attrs:{index:"3"}},[t("template",{attrs:{slot:"title"},slot:"title"},[t("i",{staticClass:"el-icon-setting"}),s._v("Navigator Three")]),t("el-menu-item-group",[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("Group 1")]),t("el-menu-item",{attrs:{index:"3-1"}},[s._v("Option 1")]),t("el-menu-item",{attrs:{index:"3-2"}},[s._v("Option 2")])],2),t("el-menu-item-group",{attrs:{title:"Group 2"}},[t("el-menu-item",{attrs:{index:"3-3"}},[s._v("Option 3")])],1),t("el-submenu",{attrs:{index:"3-4"}},[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("Option 4")]),t("el-menu-item",{attrs:{index:"3-4-1"}},[s._v("Option 4-1")])],2)],2)],1)],1),t("el-container",[t("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[t("el-dropdown",[t("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("View")]),t("el-dropdown-item",[s._v("Add")]),t("el-dropdown-item",[s._v("Delete")])],1)],1),t("span",[s._v("Tom")])],1),t("el-main",[t("el-table",{attrs:{data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"height: 500px; border: 1px solid #eee"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"background-color: rgb(238, 241, 246)"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":default-openeds")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"['1', '3']\"")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-message"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("Navigator One"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("Option 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("Option 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("Option 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("Option 4-1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("Navigator Two"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("Option 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("Option 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("Option 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("Option 4-1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("Navigator Three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3-1"')]),s._v(">")]),s._v("Option 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3-2"')]),s._v(">")]),s._v("Option 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3-3"')]),s._v(">")]),s._v("Option 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3-4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3-4-1"')]),s._v(">")]),s._v("Option 4-1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text-align: right; font-size: 12px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-right: 15px"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("View"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Add"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Delete"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Tom"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"140"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-header")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#B3C0D1")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("60px")]),s._v(";\n }\n \n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" item = {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n };\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Array")]),s._v("("),t("span",{attrs:{class:"hljs-number"}},[s._v("20")]),s._v(").fill(item)\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenedor","aria-hidden":"true"}},[s._v("¶")]),s._v(" Contenedor")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("")]),s._v(": Contenedor. Cuando este elemento se anida con un "),t("code",{pre:!0},[s._v("")]),s._v(" o "),t("code",{pre:!0},[s._v("")]),s._v(", todos los elementos secundarios se organizan verticalmente.\nDe lo contrario, de forma horizontal.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("")]),s._v(": Contenedor para cabeceras.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("")]),s._v(": Contenedor para secciones laterales (generalmente, una barra lateral).")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("")]),s._v(": Contenedor para sección principal.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("")]),s._v(": Contenedor para pie de página.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de "),t("code",{pre:!0},[s._v("")]),s._v(" tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un "),t("code",{pre:!0},[s._v("")]),s._v(".")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"disenos-comunes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disenos-comunes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Diseños comunes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ejemplo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ejemplo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Ejemplo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-contenedor","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de contenedor")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("direction")]),t("td",[s._v("dirección de diseño para elementos secundarios")]),t("td",[s._v("string")]),t("td",[s._v("horizontal / vertical")]),t("td",[s._v("vertical cuando el elemento está anidado con "),t("code",{pre:!0},[s._v("el-header")]),s._v(", de lo contrario, horizontal")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-cabecera"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-cabecera","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de cabecera")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("height")]),t("td",[s._v("altura de la cabecera")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("60px")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-barra-lateral"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-barra-lateral","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de barra lateral")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("width")]),t("td",[s._v("ancho de la barra lateral")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("300px")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-pie-de-pagina"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pie-de-pagina","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de pie de página")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("height")]),t("td",[s._v("altura del pie de página")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("60px")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1329)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1330),e=t(0),n=e(null,l.a,!1,null,null,null);a.default=n.exports},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"tema-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tema-personalizado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tema personalizado")]),t("p",[s._v("Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.")]),t("h3",{attrs:{id:"cambiando-el-color-del-tema"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cambiando-el-color-del-tema","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cambiando el color del tema")]),t("p",[s._v("Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el "),t("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[s._v("sitio de visualización de temas")]),s._v(". Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.")]),t("p",[s._v("Este sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).")]),t("h3",{attrs:{id:"actualizando-variables-scss-en-tu-proyecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#actualizando-variables-scss-en-tu-proyecto","aria-hidden":"true"}},[s._v("¶")]),s._v(" Actualizando variables SCSS en tu proyecto")]),t("p",[t("code",{pre:!0},[s._v("theme-chalk")]),s._v(" esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, "),t("code",{pre:!0},[s._v("element-variables.scss")]),s._v(":")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[s._v("/* Color del tema */\n$--color-primary: teal;\n\n/* Ubicación de la fuente, obligatoria */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),t("p",[s._v("Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-JS"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'./element-variables.scss'")]),s._v("\n\nVue.use(Element)\n")])]),t("div",{staticClass:"tip"},[t("p",[s._v("Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.")])]),t("h3",{attrs:{id:"cli-para-generar-temas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cli-para-generar-temas","aria-hidden":"true"}},[s._v("¶")]),s._v(" CLI para generar temas")]),t("p",[s._v("Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:")]),t("h4",{attrs:{id:"instalacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Instalación")])]),t("p",[s._v("Primero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-shell"}},[s._v("npm i element-theme -g\n")])]),t("p",[s._v("Ahora, instale el tema "),t("code",{pre:!0},[s._v("chalk")]),s._v(" desde npm o Github.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-shell"}},[s._v("# desde npm\nnpm i element-theme-chalk -D\n\n# desde GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),t("h4",{attrs:{id:"inicializar-archivo-de-variables"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inicializar-archivo-de-variables","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Inicializar archivo de variables")])]),t("p",[s._v("Después de haber instalado correctamente los paquetes, el comando "),t("code",{pre:!0},[s._v("et")]),s._v(" estará disponible en su CLI (si instalo el paquete de manera local, utilize "),t("code",{pre:!0},[s._v("node_modules/.bin/et")]),s._v(" en su lugar). Ejecute "),t("code",{pre:!0},[s._v("-i")]),s._v(" para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama "),t("code",{pre:!0},[s._v("element-variables.scss")]),s._v(". También puede especificar un directorio distinto.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-shell"}},[s._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),t("p",[s._v("En el archivo "),t("code",{pre:!0},[s._v("element-variables.scss")]),s._v(" podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-css"}},[s._v("$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-id"}},[s._v("#409EFF")]),s._v(" !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-1")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 10%) !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* 53a8ff */")]),s._v("\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-2")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 20%) !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* 66b1ff */")]),s._v("\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-3")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 30%) !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* 79bbff */")]),s._v("\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-4")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 40%) !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* 8cc5ff */")]),s._v("\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-5")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 50%) !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* a0cfff */")]),s._v("\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-6")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 60%) !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* b3d8ff */")]),s._v("\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-7")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 70%) !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* c6e2ff */")]),s._v("\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-8")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 80%) !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* d9ecff */")]),s._v("\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-9")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 90%) !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* ecf5ff */")]),s._v("\n\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-success")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-id"}},[s._v("#67c23a")]),s._v(" !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-warning")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-id"}},[s._v("#e6a23c")]),s._v(" !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-danger")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-id"}},[s._v("#f56c6c")]),s._v(" !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-info")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-id"}},[s._v("#909399")]),s._v(" !"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n\n...\n")])]),t("h4",{attrs:{id:"modificando-variables"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modificando-variables","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Modificando variables")])]),t("p",[s._v("Solo debe modificar el archivo "),t("code",{pre:!0},[s._v("element-variables.scss")]),s._v(", por ejemplo, para cambiar el color del tema a rojo:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-CSS"}},[s._v("$"),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("red")]),s._v(";\n")])]),t("h4",{attrs:{id:"construyendo-el-tema"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#construyendo-el-tema","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Construyendo el tema")])]),t("p",[s._v("Después de haber modificado el archivo de variables, utilizaremos el comando "),t("code",{pre:!0},[s._v("et")]),s._v(" para construir nuestro tema. Puedes activar el modo "),t("code",{pre:!0},[s._v("watch")]),s._v(" agregando el parámetro "),t("code",{pre:!0},[s._v("-w")]),s._v(". Y, si desea personalizar el nombre del archivo, debes agregar el parámetro "),t("code",{pre:!0},[s._v("-c")]),s._v(" seguido del nombre.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-shell"}},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),t("h4",{attrs:{id:"importar-un-tema-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-personalizado","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Importar un tema personalizado")])]),t("p",[s._v("Por defecto, el archivo de tema construido es colocado dentro de "),t("code",{pre:!0},[s._v("./theme")]),s._v(". Puede especificar un directorio distinto utilizando el parámetro "),t("code",{pre:!0},[s._v("-o")]),s._v(". Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'../theme/index.css'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),t("h4",{attrs:{id:"importar-un-tema-de-componente-bajo-demanda"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-de-componente-bajo-demanda","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Importar un tema de componente bajo demanda")])]),t("p",[s._v("Si esta utilizando "),t("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(" para importar bajo demanda, solo debe modificar el archivo "),t("code",{pre:!0},[s._v(".babelrc")]),s._v(" y especificar en la propiedad "),t("code",{pre:!0},[s._v("styleLibraryName")]),s._v(" la ruta en donde se encuentra localizado su tema personalizado relativo a "),t("code",{pre:!0},[s._v(".babelrc")]),s._v(". "),t("strong",[s._v("Nota")]),s._v(" el carácter "),t("code",{pre:!0},[s._v("~")]),s._v(" es obligatorio:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-json"}},[s._v("{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [["),t("span",{attrs:{class:"hljs-string"}},[s._v('"component"')]),s._v(", [\n {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"libraryName"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"element-ui"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"styleLibraryName"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"~theme"')]),s._v("\n }\n ]]]\n}\n")])]),t("p",[s._v("Si no esta familiarizado con "),t("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(", por favor diríjase a la documentación sobre "),t("a",{attrs:{href:"./#/en-US/component/quickstart"}},[s._v("Como Iniciar")]),s._v(". Para más detalles, consulte el "),t("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("repositorio del proyecto")]),s._v(" de "),t("code",{pre:!0},[s._v("element-theme")]),s._v(".")])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1332)},function(s,a,t){"use strict";function l(s){t(1333)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1335),n=t.n(e),r=t(1336),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1334);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("e405303a",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-block.demo-date-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-date-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-date-picker .block:last-child{border-right:none}.demo-date-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,a,t){"use strict";s.exports={data:function(){return{pickerOptions1:{disabledDate:function(s){return s.getTime()>Date.now()},shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var a=new Date;a.setTime(a.getTime()-864e5),s.$emit("pick",a)}},{text:"A week ago",onClick:function(s){var a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",a)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",[t,a])}},{text:"Last month",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-2592e6),s.$emit("pick",[t,a])}},{text:"Last 3 months",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-7776e6),s.$emit("pick",[t,a])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:[]}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Utilice Date Picker para introducir la fecha.")]),s._m(1),t("p",[s._v('Date Picker básico por "día".')]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions1: {\n disabledDate(time) {\n return time.getTime() > Date.now();\n },\n shortcuts: [{\n text: 'Today',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Yesterday',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: 'A week ago',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: '',\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default")]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Picker with quick options")]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})],1)]],2),t("p",[s._v("La medida está determinada por el atributo "),t("code",[s._v("type")]),s._v(" . Puede habilitar las opciones rápidas creando un objeto "),t("code",[s._v("picker-options")]),s._v(" con la propiedad "),t("code",[s._v("shortcuts")]),s._v(". La fecha desactivada se ajusta mediante "),t("code",[s._v("disabledDate")]),s._v(", que es una función.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a day"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Picker with quick options"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a day"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions1")]),s._v(": {\n disabledDate(time) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" time.getTime() > "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v(".now();\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("());\n }\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),t("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(");\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),t("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Puede seleccionar la semana, el mes o el año extendiendo el componente date picker estándar.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Week\n \n \n
    \n
    \n Month\n \n \n
    \n
    \n Year\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value3: '',\n value4: '',\n value5: ''\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Week")]),t("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Month")]),t("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Year")]),t("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})],1)]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Week"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"week"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Week WW"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a week"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Month"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"month"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a month"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Year"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"year"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a year"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Se soporta la selección de un rango de fechas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: 'Last week',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last month',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value6: '',\n value7: ''\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default")]),t("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:s.value6,callback:function(a){s.value6=a},expression:"value6"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("With quick options")]),t("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(a){s.value7=a},expression:"value7"}})],1)]],2),t("p",[s._v("En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo "),t("code",[s._v("unlink-panels")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With quick options"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("unlink-panels")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions2")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),t("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),t("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("30")]),s._v(");\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),t("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("90")]),s._v(");\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value8: '',\n value9: ''\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("date")]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:s.value8,callback:function(a){s.value8=a},expression:"value8"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("daterange")]),t("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:s.value9,callback:function(a){s.value9=a},expression:"value9"}})],1)]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("date"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("default-value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2010-10-01"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("daterange"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Start Date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"End Date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("default-value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2010-10-01"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),t("p",[s._v("Por defecto, el componente acepta y emite un objeto Date. A continuación se soportan cadenas de formato, usando UTC 2017-01-02 03:04:05 como ejemplo:")]),s._m(9),s._m(10),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value10: '',\n value11: '',\n value12: ''\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Emits Date object")]),t("div",{staticClass:"demonstration"},[s._v("Value: "+s._s(s.value10))]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:s.value10,callback:function(a){s.value10=a},expression:"value10"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Use value-format")]),t("div",{staticClass:"demonstration"},[s._v("Value: "+s._s(s.value11))]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:s.value11,callback:function(a){s.value11=a},expression:"value11"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Timestamp")]),t("div",{staticClass:"demonstration"},[s._v("Value："+s._s(s.value12))]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:s.value12,callback:function(a){s.value12=a},expression:"value12"}})],1)]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Emits Date object"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Value: {{ value10 }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a Date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"yyyy/MM/dd"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Use value-format"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Value: {{ value11 }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value11"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a Date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"yyyy/MM/dd"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value-format")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"yyyy-MM-dd"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Timestamp"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Value：{{ value12 }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value12"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a Date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"yyyy/MM/dd"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value-format")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"timestamp"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value11")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value12")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),t("p",[s._v("Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de inicio y la fecha final.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value12: []\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("p",[s._v("Component value："+s._s(s.value12))]),t("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start date","end-placeholder":"End date","default-time":["00:00:00","23:59:59"]},model:{value:s.value12,callback:function(a){s.value12=a},expression:"value12"}})],1)]],2),t("p",[s._v("Por defecto, la hora de la fecha de inicio y final es "),t("code",[s._v("00:00:00")]),s._v(". Configurar "),t("code",[s._v("default-time")]),s._v(" puede cambiar la hora respectivamente. Acepta un array de hasta dos cadenas con el formato "),t("code",[s._v("12:00:00")]),s._v(". La primera cadena fija la hora para la fecha de inicio y la segunda para la fecha final.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Component value：{{ value12 }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value12"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"['00:00:00', '23:59:59']\"")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value12")]),s._v(": []\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ingresar-fecha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ingresar-fecha","aria-hidden":"true"}},[s._v("¶")]),s._v(" Ingresar Fecha")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"otras-mediciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#otras-mediciones","aria-hidden":"true"}},[s._v("¶")]),s._v(" Otras mediciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"rango-de-fechas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-fechas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rango de fechas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"valor-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valor-por-defecto","aria-hidden":"true"}},[s._v("¶")]),s._v(" Valor por defecto")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar "),t("code",{pre:!0},[s._v("default-value")]),s._v(" para fijar otra fecha. Su valor debe ser definido por "),t("code",{pre:!0},[s._v("new Date()")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Si el tipo es "),t("code",{pre:!0},[s._v("daterange")]),s._v(", "),t("code",{pre:!0},[s._v("default-value")]),s._v(" establece el calendario del lado izquierdo.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"formatos-de-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formatos-de-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Formatos de Date")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Utilice "),t("code",{pre:!0},[s._v("format")]),s._v(" para controlar el formato del texto visualizado en el input. Utilice "),t("code",{pre:!0},[s._v("value-format")]),s._v(" para controlar el formato del valor vinculado.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"warning"},[t("p",[s._v("Preste atención a la capitalización")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("formato")]),t("th",[s._v("significado")]),t("th",[s._v("nota")]),t("th",[s._v("ejemplo")])])]),t("tbody",[t("tr",[t("td",[t("code",{pre:!0},[s._v("yyyy")])]),t("td",[s._v("año")]),t("td"),t("td",[s._v("2017")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("M")])]),t("td",[s._v("mes")]),t("td",[s._v("no acepta 0")]),t("td",[s._v("1")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("MM")])]),t("td",[s._v("mes")]),t("td"),t("td",[s._v("01")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("W")])]),t("td",[s._v("semana")]),t("td",[s._v("solamente para semanas en picker's "),t("code",{pre:!0},[s._v("format")]),s._v("; no acepta 0")]),t("td",[s._v("1")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("WW")])]),t("td",[s._v("semana")]),t("td",[s._v("solamente para semanas en picker's "),t("code",{pre:!0},[s._v("format")])]),t("td",[s._v("01")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("d")])]),t("td",[s._v("dia")]),t("td",[s._v("no acepta 0")]),t("td",[s._v("2")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("dd")])]),t("td",[s._v("dia")]),t("td"),t("td",[s._v("02")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("H")])]),t("td",[s._v("hora")]),t("td",[s._v("24-hora reloj; no acepta 0")]),t("td",[s._v("3")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("HH")])]),t("td",[s._v("hora")]),t("td",[s._v("24-hora reloj")]),t("td",[s._v("03")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("h")])]),t("td",[s._v("hora")]),t("td",[s._v("12-hora reloj; debe usarse con "),t("code",{pre:!0},[s._v("A")]),s._v(" o "),t("code",{pre:!0},[s._v("a")]),s._v("; no acepta 0")]),t("td",[s._v("3")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("hh")])]),t("td",[s._v("hour")]),t("td",[s._v("12-hora reloj; debe usarse con "),t("code",{pre:!0},[s._v("A")]),s._v(" o "),t("code",{pre:!0},[s._v("a")])]),t("td",[s._v("03")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("m")])]),t("td",[s._v("minuto")]),t("td",[s._v("no acepta 0")]),t("td",[s._v("4")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("mm")])]),t("td",[s._v("minuto")]),t("td"),t("td",[s._v("04")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("s")])]),t("td",[s._v("segundo")]),t("td",[s._v("no acepta 0")]),t("td",[s._v("5")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("ss")])]),t("td",[s._v("segundo")]),t("td"),t("td",[s._v("05")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("A")])]),t("td",[s._v("AM/PM")]),t("td",[s._v("solamente para "),t("code",{pre:!0},[s._v("format")]),s._v(", mayusculas")]),t("td",[s._v("AM")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("a")])]),t("td",[s._v("am/pm")]),t("td",[s._v("solamente para "),t("code",{pre:!0},[s._v("format")]),s._v(", minúsculas")]),t("td",[s._v("am")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("timestamp")])]),t("td",[s._v("JS timestamp")]),t("td",[s._v("solamente para "),t("code",{pre:!0},[s._v("value-format")]),s._v("; valor vinculado debe ser un "),t("code",{pre:!0},[s._v("number")])]),t("td",[s._v("1483326245000")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"hora-por-defecto-para-comienzo-y-fin-de-fecha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hora-por-defecto-para-comienzo-y-fin-de-fecha","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hora por defecto para comienzo y fin de fecha")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("si DatePicker es solo de lectura")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si DatePicker esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del input")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("si el input es editable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("si se muestra el boton de borrado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder cuando el modo NO es rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("start-placeholder")]),t("td",[s._v("placeholder para la fecha de inicio en modo rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("end-placeholder")]),t("td",[s._v("placeholder para la fecha final en modo rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de picker")]),t("td",[s._v("string")]),t("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),t("td",[s._v("date")])]),t("tr",[t("td",[s._v("format")]),t("td",[s._v("formato en que se muestra el valor en el input")]),t("td",[s._v("string")]),t("td",[s._v("ver "),t("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[s._v("date formats")])]),t("td",[s._v("yyyy-MM-dd")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alineación")]),t("td",[s._v("left/center/right")]),t("td",[s._v("left")]),t("td")]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase personalizada para el dropdown de DatePicker")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("picker-options")]),t("td",[s._v("opciones adicionales, chequee la tabla debajo")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{}")])]),t("tr",[t("td",[s._v("range-separator")]),t("td",[s._v("separador de rangos")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("'-'")])]),t("tr",[t("td",[s._v("default-value")]),t("td",[s._v("opcional, valor por defecto para el calendario")]),t("td",[s._v("Date")]),t("td",[s._v("cualquiera aceptado por "),t("code",{pre:!0},[s._v("new Date()")])]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("default-time")]),t("td",[s._v("opcional, los valores para las horas que se deben usar en la seleccion de fechas cuando se usa el modo rango")]),t("td",[s._v("string[]")]),t("td",[s._v("Array de dos valores, cada uno es un string del estilo "),t("code",{pre:!0},[s._v("12:00:00")]),s._v(". El primer elemento es para la fecha de inicio y el segundo es para la fecha final.")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value-format")]),t("td",[s._v("opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date.")]),t("td",[s._v("string")]),t("td",[s._v("ver "),t("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[s._v("date formats")])]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("name")]),s._v(" en el input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("unlink-panels")]),t("td",[s._v("desvincular los dos paneles de fecha en el range-picker")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("prefix-icon")]),t("td",[s._v("Clase personalizada para el icono prefijado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-date")])]),t("tr",[t("td",[s._v("clear-icon")]),t("td",[s._v("Clase personalizada para el icono "),t("code",{pre:!0},[s._v("clear")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-circle-close")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"opciones-del-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-del-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Opciones del Picker")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("shortcuts")]),t("td",[s._v("{ text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente")]),t("td",[s._v("object[]")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabledDate")]),t("td",[s._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("firstDayOfWeek")]),t("td",[s._v("primer dia de la semana")]),t("td",[s._v("Number")]),t("td",[s._v("1 to 7")]),t("td",[s._v("7")])]),t("tr",[t("td",[s._v("onPick")]),t("td",[s._v("una función que se dispara cuando se cambia la fecha seleccionada. Solamente para "),t("code",{pre:!0},[s._v("daterange")]),s._v(" y "),t("code",{pre:!0},[s._v("datetimerange")]),s._v(".")]),t("td",[s._v("Function({ maxDate, minDate })")]),t("td",[s._v("-")]),t("td",[s._v("-")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"accesso-directo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accesso-directo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accesso directo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("text")]),t("td",[s._v("título del acceso directo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("onClick")]),t("td",[s._v("una función se dispara al hacer clic en el acceso directo, con"),t("code",{pre:!0},[s._v("vm")]),s._v("como parámetro. Puede modificar el valor del picker emitiendo el evento "),t("code",{pre:!0},[s._v("pick")]),s._v(". Ejemplo: "),t("code",{pre:!0},[s._v("vm.$emit('pick', new Date())")])]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el usuario confirma el valor")]),t("td",[s._v("valor enlazado al componente")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("se dispara cuando el input pierde el foco")]),t("td",[s._v("instancia del componente")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("se dispara cuando el input obtiene el foco")]),t("td",[s._v("instancia del componente")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Metodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parameteros")])])]),t("tbody",[t("tr",[t("td",[s._v("focus")]),t("td",[s._v("coloca el foco en el input")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1338)},function(s,a,t){"use strict";function l(s){t(1339)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1341),n=t.n(e),r=t(1342),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1340);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("46eee02c",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-block.demo-datetime-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-datetime-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-datetime-picker .block:last-child{border-right:none}.demo-datetime-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,a,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var a=new Date;a.setTime(a.getTime()-864e5),s.$emit("pick",a)}},{text:"A week ago",onClick:function(s){var a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",a)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",[t,a])}},{text:"Last month",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-2592e6),s.$emit("pick",[t,a])}},{text:"Last 3 months",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-7776e6),s.$emit("pick",[t,a])}}]},value1:"",value2:"",value3:new Date,value4:"",value5:"",value6:""}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Seleccionar fecha y tiempo juntos en un picker.")]),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions1: {\n shortcuts: [{\n text: 'Today',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Yesterday',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: 'A week ago',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: ''\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default")]),t("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),t("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})],1)]],2),t("p",[s._v("Puede seleccionar la fecha y la hora en un picker al mismo tiempo configurando el tipo de fecha y la hora. La forma de utilizar los atajos es la misma que con Date Picker.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select date and time"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select date and time"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions1")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("());\n }\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),t("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(");\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),t("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: 'Last week',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last month',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value4: ''\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default")]),t("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),t("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1)]],2),t("p",[s._v("Puede seleccionar la fecha y el rango de tiempo ajustando "),t("code",[s._v("type")]),s._v(" a "),t("code",[s._v("datetimerange")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions2")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),t("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),t("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("30")]),s._v(");\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),t("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{attrs:{class:"hljs-number"}},[s._v("90")]),s._v(");\n picker.$emit("),t("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": ["),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v("), "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("11")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(")],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value5: '',\n value6: ''\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Start date time 12:00:00")]),t("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Start date time 12:00:00, end date time 08:00:00")]),t("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00","08:00:00"]},model:{value:s.value6,callback:function(a){s.value6=a},expression:"value6"}})],1)]],2),t("p",[s._v("When picking date range on the date panel with type "),t("code",[s._v("datetimerange")]),s._v(", "),t("code",[s._v("00:00:00")]),s._v(" will be used as the default time value for start and end date. We can control it with the "),t("code",[s._v("default-time")]),s._v(" attribute. "),t("code",[s._v("default-time")]),s._v(" accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Start date time 12:00:00"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Start Date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"End Date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"['12:00:00']\"")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Start date time 12:00:00, end date time 08:00:00"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Start Date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"End Date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"['12:00:00', '08:00:00']\"")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre "),t("code",{pre:!0},[s._v("pickerOptions")]),s._v(" y otros atributos, puede referirse a DatePicker y TimePicker.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"fecha-y-hora"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fecha-y-hora","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fecha y hora")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"alcance-de-fecha-y-tiempo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alcance-de-fecha-y-tiempo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alcance de fecha y tiempo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"default-time-value-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-value-for-start-date-and-end-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default time value for start date and end date")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributos")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("si DatePicker es solo de lectura")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si DatePicker esta deshabilitada")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("Si la entrada es editable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("Si mostrar el botón de "),t("code",{pre:!0},[s._v("clear")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del input")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder cuando el modo NO es Range")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("start-placeholder")]),t("td",[s._v("placeholder para el inicio de fecha en el modo Range")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("end-placeholder")]),t("td",[s._v("placeholder para el fin de fecha en el modo Range")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("time-arrow-control")]),t("td",[s._v("si se puede modificar el "),t("code",{pre:!0},[s._v("time")]),s._v(" utilizando botones con flechas")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo del picker")]),t("td",[s._v("string")]),t("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),t("td",[s._v("date")])]),t("tr",[t("td",[s._v("format")]),t("td",[s._v("formato de valor mostrado en el input")]),t("td",[s._v("string")]),t("td",[s._v("ver "),t("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[s._v("date formats")])]),t("td",[s._v("yyyy-MM-dd")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alineación")]),t("td",[s._v("left/center/right")]),t("td",[s._v("left")]),t("td")]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase personalizado para el Dropdown de DatePicker")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("picker-options")]),t("td",[s._v("opciones adicionales, Comprueba la tabla de mas abajo")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{}")])]),t("tr",[t("td",[s._v("range-separator")]),t("td",[s._v("separador de rango")]),t("td",[s._v("string")]),t("td",[s._v("-")]),t("td",[s._v("'-'")])]),t("tr",[t("td",[s._v("default-value")]),t("td",[s._v("opcional, fecha predeterminada del calendario")]),t("td",[s._v("Fecha")]),t("td",[s._v("cualquier cosa aceptada por "),t("code",{pre:!0},[s._v("new Date()")]),s._v(" —")]),t("td")]),t("tr",[t("td",[s._v("default-time")]),t("td",[s._v("the time value to use when selecting date range")]),t("td",[s._v("string[]")]),t("td",[s._v("Array with length 2, each item is a string like "),t("code",{pre:!0},[s._v("12:00:00")]),s._v(". The first item for the start date and then second item for the end date")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value-format")]),t("td",[s._v("opcional, formato de valor de enlazado. Si no se especifica, el valor de enlazado será un objeto Date")]),t("td",[s._v("cadena")]),t("td",[s._v("ver "),t("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[s._v("date formats")])]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("name")]),s._v(" en la entrada nativa")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("unlink-panels")]),t("td",[s._v("desconectar dos date-panels en range-picker")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("prefix-icon")]),t("td",[s._v("Clase personalizada para el icono prefijado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-date")])]),t("tr",[t("td",[s._v("clear-icon")]),t("td",[s._v("Clase personalizada para el icono "),t("code",{pre:!0},[s._v("clear")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-circle-close")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("shortcuts")]),t("td",[s._v("un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo")]),t("td",[s._v("objeto[]")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabledDate")]),t("td",[s._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano")]),t("td",[s._v("función")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("firstDayOfWeek")]),t("td",[s._v("primera día de semana")]),t("td",[s._v("Número")]),t("td",[s._v("1 to 7")]),t("td",[s._v("7")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"accesos-directos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accesos-directos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accesos directos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("text")]),t("td",[s._v("título del acceso directo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("onClick")]),t("td",[s._v("la funcion se dispara cuando se hace clic en el acceso directo, con el "),t("code",{pre:!0},[s._v("vm")]),s._v(" como parámetro. Puede modificar el valor del picker emitiendo el evento"),t("code",{pre:!0},[s._v("pick")]),s._v(". Ejemplo: "),t("code",{pre:!0},[s._v("vm.$emit('pick', new Date())")])]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("Se dispara cuando el usuario confirma el valor")]),t("td",[s._v("valor enlazado del componente")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("Se dispara cuando el input pierde el foco")]),t("td",[s._v("instancia del componente")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("Se dispara cuando el input obtiene el foco")]),t("td",[s._v("instancia del componente")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Métodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Método")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("focus")]),t("td",[s._v("foco en el input")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1344)},function(s,a,t){"use strict";function l(s){t(1345)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1347),n=t.n(e),r=t(1348),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1346);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("3581f8cc",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".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,a,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,outerVisible:!1,innerVisible:!1,centerDialogVisible:!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(a){s()}).catch(function(s){})}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Informar a usuarios preservando el estado de la página actual.")]),s._m(1),t("p",[s._v("Dialog abre una caja de diálogo, y es bastante personalizable.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'click to open the Dialog\n\n\n This is a message\n \n Cancel\n Confirm\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n dialogVisible: false\n };\n },\n methods: {\n handleClose(done) {\n this.$confirm('Are you sure to close this dialog?')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"text"},on:{click:function(a){s.dialogVisible=!0}}},[s._v("click to open the Dialog")]),t("el-dialog",{attrs:{title:"Tips",visible:s.dialogVisible,width:"30%","before-close":s.handleClose},on:{"update:visible":function(a){s.dialogVisible=a}}},[t("span",[s._v("This is a message")]),t("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("el-button",{on:{click:function(a){s.dialogVisible=!1}}},[s._v("Cancel")]),t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),t("p",[s._v("Establezca el atributo "),t("code",[s._v("visible")]),s._v(" con un booleano, y el Dialog se muestra cuando es "),t("code",[s._v("true")]),s._v(". El diálogo tiene dos partes: "),t("code",[s._v("body")]),s._v(" y "),t("code",[s._v("footer")]),s._v(", este último requiere un slot llamado "),t("code",[s._v("footer")]),s._v(". El atributo "),t("code",[s._v("title")]),s._v(" es opcional (vacío por defecto) y sirve para definir un título. Por último, este ejemplo muestra cómo se utiliza "),t("code",[s._v("before-close")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Tips"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":before-close")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("This is a message"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("dialogVisible")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClose(done) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Are you sure to close this dialog?'")]),s._v(")\n .then("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n done();\n })\n .catch("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {});\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),t("p",[s._v("El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Table y Form con Dialog")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\x3c!-- Table --\x3e\nopen a Table nested Dialog\n\n\n \n \n \n \n \n\n\n\x3c!-- Form --\x3e\nopen a Form nested Dialog\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n Cancel\n Confirm\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-03',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n dialogTableVisible: false,\n dialogFormVisible: false,\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n formLabelWidth: '120px'\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"text"},on:{click:function(a){s.dialogTableVisible=!0}}},[s._v("open a Table nested Dialog")]),t("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogTableVisible},on:{"update:visible":function(a){s.dialogTableVisible=a}}},[t("el-table",{attrs:{data:s.gridData}},[t("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),t("el-button",{attrs:{type:"text"},on:{click:function(a){s.dialogFormVisible=!0}}},[s._v("open a Form nested Dialog")]),t("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogFormVisible},on:{"update:visible":function(a){s.dialogFormVisible=a}}},[t("el-form",{attrs:{model:s.form}},[t("el-form-item",{attrs:{label:"Promotion name","label-width":s.formLabelWidth}},[t("el-input",{attrs:{"auto-complete":"off"},model:{value:s.form.name,callback:function(a){s.$set(s.form,"name",a)},expression:"form.name"}})],1),t("el-form-item",{attrs:{label:"Zones","label-width":s.formLabelWidth}},[t("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:s.form.region,callback:function(a){s.$set(s.form,"region",a)},expression:"form.region"}},[t("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("el-button",{on:{click:function(a){s.dialogFormVisible=!1}}},[s._v("Cancel")]),t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.dialogFormVisible=!1}}},[s._v("Confirm")])],1)],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- Table --\x3e")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("open a Table nested Dialog"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Shipping address"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- Form --\x3e")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("open a Form nested Dialog"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Shipping address"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion name"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form.name"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Zones"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form.region"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please select a zone"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Zone No.1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Zone No.2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Cancel"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Confirm"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("gridData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("dialogTableVisible")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("dialogFormVisible")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("form")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("formLabelWidth")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'120px'")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Si un diálogo está anidado en otro diálogo, se requiere append-to-body.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n outerVisible: false,\n innerVisible: false\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:function(a){s.outerVisible=!0}}},[s._v("open the outer Dialog")]),t("el-dialog",{attrs:{title:"Outer Dialog",visible:s.outerVisible},on:{"update:visible":function(a){s.outerVisible=a}}},[t("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:s.innerVisible,"append-to-body":""},on:{"update:visible":function(a){s.innerVisible=a}}}),t("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("el-button",{on:{click:function(a){s.outerVisible=!1}}},[s._v("Cancel")]),t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.innerVisible=!0}}},[s._v("open the inner Dialog")])],1)],1)]],2),t("p",[s._v("Normalmente no recomendamos el uso de Dialog anidado. Si necesita que se muestren múltiples diálogos en la página, puede simplemente aplanarlos para que sean hermanos entre sí. Si debe anidar un Diálogo dentro de otro Diálogo, establezca "),t("code",[s._v("append-to-body")]),s._v(" del Diálogo anidado como true, y lo añadirá al cuerpo en lugar de su nodo padre, para que ambos Diálogos puedan ser correctamente renderizados.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"outerVisible = true"')]),s._v(">")]),s._v("open the outer Dialog"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Outer Dialog"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"outerVisible"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Inner Dialog"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"innerVisible"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("append-to-body")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"outerVisible = false"')]),s._v(">")]),s._v("Cancel"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"innerVisible = true"')]),s._v(">")]),s._v("open the inner Dialog"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("outerVisible")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("innerVisible")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("El contenido de Diálogo se puede centrar.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Click to open the Dialog\n\n\n It should be noted that the content will not be aligned in center by default\n \n Cancel\n Confirm\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n centerDialogVisible: false\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"text"},on:{click:function(a){s.centerDialogVisible=!0}}},[s._v("Click to open the Dialog")]),t("el-dialog",{attrs:{title:"Warning",visible:s.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(a){s.centerDialogVisible=a}}},[t("span",[s._v("It should be noted that the content will not be aligned in center by default")]),t("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("el-button",{on:{click:function(a){s.centerDialogVisible=!1}}},[s._v("Cancel")]),t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.centerDialogVisible=!1}}},[s._v("Confirm")])],1)])],1),t("p",[s._v("Ajuste "),t("code",[s._v("center")]),s._v(" en "),t("code",[s._v("true")]),s._v(" para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = true"')]),s._v(">")]),s._v("Click to open the Dialog"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Warning"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("It should be noted that the content will not be aligned in center by default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("Cancel"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("Confirm"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("centerDialogVisible")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso Básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[t("code",{pre:!0},[s._v("before-close")]),s._v(" sólo funciona cuando el usuario hace clic en el icono de cerrar o en el fondo. Si tiene botones que cierran el cuadro de diálogo en el slot llamado "),t("code",{pre:!0},[s._v("footer")]),s._v(", puede agregar lo que haría "),t("code",{pre:!0},[s._v("before-close")]),s._v(" en el manejador de eventos de los botones.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"personalizaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[s._v("¶")]),s._v(" Personalizaciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dialogo-anidado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialogo-anidado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Diálogo anidado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"contenido-centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenido-centrado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Contenido centrado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[t("code",{pre:!0},[s._v("center")]),s._v(" sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("Si la variable ligada a "),t("code",{pre:!0},[s._v("visible")]),s._v(" se gestiona en el Vuex store, el "),t("code",{pre:!0},[s._v(".sync")]),s._v(" no puede funcionar correctamente. En este caso, elimine el modificador "),t("code",{pre:!0},[s._v(".sync")]),s._v(", escuche los eventos de "),t("code",{pre:!0},[s._v("open")]),s._v(" y "),t("code",{pre:!0},[s._v("close")]),s._v(" Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("visible")]),t("td",[s._v("visibilidad del Diálogo, apoya el modificador .sync")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente)")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("anchura de Diálogo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("50%")])]),t("tr",[t("td",[s._v("fullscreen")]),t("td",[s._v("si el diálogo ocupa pantalla completa")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("top")]),t("td",[s._v("valor de "),t("code",{pre:!0},[s._v("margin-top")]),s._v(" del Diálogo CSS")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("15vh")])]),t("tr",[t("td",[s._v("modal")]),t("td",[s._v("si se muestra una máscara")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("modal-append-to-body")]),t("td",[s._v("si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("append-to-body")]),t("td",[s._v("Si adjuntar el cuadro de diálogo al cuerpo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("lock-scroll")]),t("td",[s._v("Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("custom-class")]),t("td",[s._v("nombres de clase personalizada para el Diálogo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("close-on-click-modal")]),t("td",[s._v("si el Diálogo puede ser cerrado haciendo clic en la máscara")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("close-on-press-escape")]),t("td",[s._v("si el Diálogo puede ser cerrado presionando ESC")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-close")]),t("td",[s._v("si mostrar un botón de cerrar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("before-close")]),t("td",[s._v("una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo")]),t("td",[s._v("función(done) "),t("code",{pre:!0},[s._v("done")]),s._v("se usa para cerrar el diálog")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("center")]),t("td",[s._v("si alinear el encabezado y el pie de página en el centro")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slots")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripcíon")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("contenido de Diálogo")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("contenido del título de Diálogo")])]),t("tr",[t("td",[s._v("footer")]),t("td",[s._v("contenido del pie de página de Diálogo")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de Evento")]),t("th",[s._v("Descripcíon")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("open")]),t("td",[s._v("se activa cuando se abre el cuadro de Diálogo")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("close")]),t("td",[s._v("se dispara cuando el Diálogo se cierra")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1350)},function(s,a,t){"use strict";function l(s){t(1351)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1353),n=t.n(e),r=t(1354),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1352);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("21f5fc24",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-box .el-dropdown{vertical-align:top}.demo-box .el-dropdown+.el-dropdown{margin-left:15px}.demo-box .el-dropdown-link{cursor:pointer;color:#409eff}.demo-box .el-icon-arrow-down{font-size:12px}.block-col-2{margin:-24px}.block-col-2 .el-col{padding:30px 0;text-align:center;border-right:1px solid #eff2f6}.block-col-2 .el-col:last-child{border-right:0}.demo-dropdown .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Menú conmutable para visualizar listas de enlaces y acciones.")]),s._m(1),t("p",[s._v("Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),t("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),t("p",[s._v("El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n")])])])]),s._m(2),t("p",[s._v("Utilizando un botón para activar la lista desplegable.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n Dropdown List\n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n\n',script:"\n export default {\n methods: {\n handleClick() {\n alert('button click');\n }\n }\n }\n",style:"\n .el-dropdown {\n vertical-align: top;\n }\n .el-dropdown + .el-dropdown {\n margin-left: 15px;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",[t("el-button",{attrs:{type:"primary"}},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1),t("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n Dropdown List\n "),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),t("p",[s._v("Utilice "),t("code",[s._v("split-button")]),s._v(" para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n Dropdown List\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("vertical-align")]),s._v(": top;\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" + "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("15px")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick() {\n alert("),t("span",{attrs:{class:"hljs-string"}},[s._v("'button click'")]),s._v(");\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Haga clic en el elemento detonante o sobre él.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n hover to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n \n click to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n .demonstration {\n display: block;\n color: #8492a6;\n font-size: 14px;\n margin-bottom: 20px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{staticClass:"block-col-2"},[t("el-col",{attrs:{span:12}},[t("span",{staticClass:"demonstration"},[s._v("hover to trigger")]),t("el-dropdown",[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),t("el-col",{attrs:{span:12}},[t("span",{staticClass:"demonstration"},[s._v("click to trigger")]),t("el-dropdown",{attrs:{trigger:"click"}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1)],1)],1)],1),t("p",[s._v("Utilice el atributo "),t("code",[s._v("trigger")]),s._v(". Por defecto, es "),t("code",[s._v("hover")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("hover to trigger"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("click to trigger"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".demonstration")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#8492a6")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",{attrs:{"hide-on-click":!1}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),t("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),t("p",[s._v("El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando "),t("code",[s._v("hide-on-click")]),s._v(" como false.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":hide-on-click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n\n',script:"\n export default {\n methods: {\n handleCommand(command) {\n this.$message('click on item ' + command);\n }\n }\n }\n",style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",{on:{command:s.handleCommand}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),t("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),t("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),t("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),t("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"d"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"e"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCommand(command) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),t("span",{attrs:{class:"hljs-string"}},[s._v("'click on item '")]),s._v(" + command);\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Default\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Medium\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Small\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Mini\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[s._v("\n Default\n "),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")])],1)],1),t("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[s._v("\n Medium\n "),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")])],1)],1),t("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[s._v("\n Small\n "),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")])],1)],1),t("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[s._v("\n Mini\n "),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")])],1)],1)],1),t("p",[s._v("Utilice el atributo "),t("code",[s._v("size")]),s._v(" para establecer tamaños adicionales con "),t("code",[s._v("medium")]),s._v(", "),t("code",[s._v("small")]),s._v(" o "),t("code",[s._v("mini")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Default\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Medium\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Small\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Mini\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"elemento-detonante"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#elemento-detonante","aria-hidden":"true"}},[s._v("¶")]),s._v(" Elemento detonante")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"como-detonar-el-evento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#como-detonar-el-evento","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cómo detonar el evento")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ocultamiento-del-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ocultamiento-del-menu","aria-hidden":"true"}},[s._v("¶")]),s._v(" Ocultamiento del menú")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Use "),t("code",{pre:!0},[s._v("hide-on-click")]),s._v(" para definir si el menú se cierra al hacer clic.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"evento-command"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evento-command","aria-hidden":"true"}},[s._v("¶")]),s._v(" Evento command")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tamaños")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dropdown-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de botón de menú, consulte Componente"),t("code",{pre:!0},[s._v("Button")]),s._v(", sólo funciona cuando "),t("code",{pre:!0},[s._v("split-button")]),s._v(" es true.")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del menú, también funciona en "),t("code",{pre:!0},[s._v("split-button")])]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("split-button")]),t("td",[s._v("si se visualiza un grupo de botones")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("placement")]),t("td",[s._v("colocación del menú")]),t("td",[s._v("string")]),t("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),t("td",[s._v("bottom-end")])]),t("tr",[t("td",[s._v("trigger")]),t("td",[s._v("cómo detonar")]),t("td",[s._v("string")]),t("td",[s._v("hover/click")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("hide-on-click")]),t("td",[s._v("si se oculta el menú después de hacer clic en el elemento")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-timeout")]),t("td",[s._v("Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara "),t("code",{pre:!0},[s._v("hover")]),s._v(")")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("250")])]),t("tr",[t("td",[s._v("hide-timeout")]),t("td",[s._v("Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara "),t("code",{pre:!0},[s._v("hover")]),s._v(")")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("150")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dropdown-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("click")]),t("td",[s._v("si "),t("code",{pre:!0},[s._v("split-button")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v(", se activa al hacer clic en el botón izquierdo")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("command")]),t("td",[s._v("activa cuando se hace clic en un elemento desplegable")]),t("td",[s._v("el comando enviado desde el elemento desplegable")])]),t("tr",[t("td",[s._v("visible-change")]),t("td",[s._v("se activa cuando aparece/desaparece el desplegable")]),t("td",[s._v("true cuando aparece, y false de otro modo")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dropdown-menu-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("command")]),t("td",[s._v("un comando que se enviará al "),t("code",{pre:!0},[s._v("command")]),s._v(" callback del Dropdown")]),t("td",[s._v("string/number/object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el elemento está desactivado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("divided")]),t("td",[s._v("si se visualiza un divisor")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1356)},function(s,a,t){"use strict";function l(s){t(1357)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1359),n=t.n(e),r=t(1360),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1358);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("178d1c7f",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,'.demo-form.demo-es .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-es .el-select .el-input{width:360px}.demo-form.demo-es .el-form{width:480px}.demo-form.demo-es .line{text-align:center}.demo-form.demo-es .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-es .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-es .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-es .el-checkbox-group:after,.demo-form.demo-es .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-es .demo-form-normal{width:480px}.demo-form.demo-es .demo-form-inline{width:auto}.demo-form.demo-es .demo-form-inline .el-input{width:150px}.demo-form.demo-es .demo-form-inline>*{margin-right:10px}.demo-form.demo-es .demo-ruleForm{width:480px}.demo-form.demo-es .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-es .demo-dynamic{width:500px}.demo-form.demo-es .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-es .fr{float:right}',""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){var s=this,a=function(s,a,t){if(!a)return t(new Error("Please input the age"));setTimeout(function(){Number.isInteger(a)?a<18?t(new Error("Age must be greater than 18")):t():t(new Error("Please input digits"))},1e3)};return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},labelPosition:"right",formLabelAlign:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]},rules2:{pass:[{validator:function(a,t,l){""===t?l(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},trigger:"blur"}],checkPass:[{validator:function(a,t,l){""===t?l(new Error("Please input the password again")):t!==s.ruleForm2.pass?l(new Error("Two inputs don't match!")):l()},trigger:"blur"}],age:[{validator:a,trigger:"blur"}]},dynamicValidateForm:{domains:[{key:Date.now(),value:""}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},onRuleFormSubmit:function(){console.log("onRuleFormSubmit")},submitForm:function(s){this.$refs[s].validate(function(s){if(!s)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var a=this.dynamicValidateForm.domains.indexOf(s);-1!==a&&this.dynamicValidateForm.domains.splice(a,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),s._m(1),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Cancel\n \n\n\n',script:"\n export default {\n data() {\n return {\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"form",attrs:{model:s.form,"label-width":"120px"}},[t("el-form-item",{attrs:{label:"Activity name"}},[t("el-input",{model:{value:s.form.name,callback:function(a){s.$set(s.form,"name",a)},expression:"form.name"}})],1),t("el-form-item",{attrs:{label:"Activity zone"}},[t("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.form.region,callback:function(a){s.$set(s.form,"region",a)},expression:"form.region"}},[t("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t("el-form-item",{attrs:{label:"Activity time"}},[t("el-col",{attrs:{span:11}},[t("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.form.date1,callback:function(a){s.$set(s.form,"date1",a)},expression:"form.date1"}})],1),t("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),t("el-col",{attrs:{span:11}},[t("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.form.date2,callback:function(a){s.$set(s.form,"date2",a)},expression:"form.date2"}})],1)],1),t("el-form-item",{attrs:{label:"Instant delivery"}},[t("el-switch",{model:{value:s.form.delivery,callback:function(a){s.$set(s.form,"delivery",a)},expression:"form.delivery"}})],1),t("el-form-item",{attrs:{label:"Activity type"}},[t("el-checkbox-group",{model:{value:s.form.type,callback:function(a){s.$set(s.form,"type",a)},expression:"form.type"}},[t("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t("el-form-item",{attrs:{label:"Resources"}},[t("el-radio-group",{model:{value:s.form.resource,callback:function(a){s.$set(s.form,"resource",a)},expression:"form.resource"}},[t("el-radio",{attrs:{label:"Sponsor"}}),t("el-radio",{attrs:{label:"Venue"}})],1)],1),t("el-form-item",{attrs:{label:"Activity form"}},[t("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(a){s.$set(s.form,"desc",a)},expression:"form.desc"}})],1),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),t("el-button",[s._v("Cancel")])],1)],1)],1),t("p",[s._v("En cada componente "),t("code",[s._v("form")]),s._v(", necesita un campo "),t("code",[s._v("form-item")]),s._v(" para que sea el contenedor del item.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form.name"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form.region"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form.date1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form.date2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Instant delivery"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form.delivery"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form.type"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Offline activities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Simple brand exposure"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form.resource"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Sponsor"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form.desc"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("form")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("p",[s._v("Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n Query\n \n\n\n',script:"\n export default {\n data() {\n return {\n formInline: {\n user: '',\n region: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[t("el-form-item",{attrs:{label:"Approved by"}},[t("el-input",{attrs:{placeholder:"Approved by"},model:{value:s.formInline.user,callback:function(a){s.$set(s.formInline,"user",a)},expression:"formInline.user"}})],1),t("el-form-item",{attrs:{label:"Activity zone"}},[t("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.formInline.region,callback:function(a){s.$set(s.formInline,"region",a)},expression:"formInline.region"}},[t("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Query")])],1)],1)],1),t("p",[s._v("Establezca el atributo "),t("code",[s._v("inline")]),s._v(" como "),t("code",[s._v("true")]),s._v(" y el formulario sera inline.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":inline")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formInline"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Approved by"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formInline.user"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Approved by"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formInline.region"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Query"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("formInline")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("user")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Left\n Right\n Top\n\n
    \n\n \n \n \n \n \n \n \n \n \n\n\n',script:"\n export default {\n data() {\n return {\n labelPosition: 'right',\n formLabelAlign: {\n name: '',\n region: '',\n type: ''\n }\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-radio-group",{attrs:{size:"small"},model:{value:s.labelPosition,callback:function(a){s.labelPosition=a},expression:"labelPosition"}},[t("el-radio-button",{attrs:{label:"left"}},[s._v("Left")]),t("el-radio-button",{attrs:{label:"right"}},[s._v("Right")]),t("el-radio-button",{attrs:{label:"top"}},[s._v("Top")])],1),t("div",{staticStyle:{margin:"20px"}}),t("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"100px",model:s.formLabelAlign}},[t("el-form-item",{attrs:{label:"Name"}},[t("el-input",{model:{value:s.formLabelAlign.name,callback:function(a){s.$set(s.formLabelAlign,"name",a)},expression:"formLabelAlign.name"}})],1),t("el-form-item",{attrs:{label:"Activity zone"}},[t("el-input",{model:{value:s.formLabelAlign.region,callback:function(a){s.$set(s.formLabelAlign,"region",a)},expression:"formLabelAlign.region"}})],1),t("el-form-item",{attrs:{label:"Activity form"}},[t("el-input",{model:{value:s.formLabelAlign.type,callback:function(a){s.$set(s.formLabelAlign,"type",a)},expression:"formLabelAlign.type"}})],1)],1)],1),t("p",[s._v("El atributo "),t("code",[s._v("label-position")]),s._v(" decide cómo se alinean las etiquetas, puede estar "),t("code",[s._v("top")]),s._v(" o "),t("code",[s._v("left")]),s._v(". Cuando se establece en "),t("code",[s._v("top")]),s._v(", las etiquetas se colocarán en la parte superior del campo de formulario.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"labelPosition"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("Left"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("Right"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("Top"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 20px;"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label-position")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"labelPosition"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.name"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.region"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.type"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("labelPosition")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'right'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("formLabelAlign")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Reset\n \n\n\n',script:"\n export default {\n data() {\n return {\n ruleForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n rules: {\n name: [\n { required: true, message: 'Please input Activity name', trigger: 'blur' },\n { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }\n ],\n region: [\n { required: true, message: 'Please select Activity zone', trigger: 'change' }\n ],\n date1: [\n { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }\n ],\n date2: [\n { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }\n ],\n type: [\n { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }\n ],\n resource: [\n { required: true, message: 'Please select activity resource', trigger: 'change' }\n ],\n desc: [\n { required: true, message: 'Please input activity form', trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"120px"}},[t("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[t("el-input",{model:{value:s.ruleForm.name,callback:function(a){s.$set(s.ruleForm,"name",a)},expression:"ruleForm.name"}})],1),t("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[t("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.ruleForm.region,callback:function(a){s.$set(s.ruleForm,"region",a)},expression:"ruleForm.region"}},[t("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t("el-form-item",{attrs:{label:"Activity time",required:""}},[t("el-col",{attrs:{span:11}},[t("el-form-item",{attrs:{prop:"date1"}},[t("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.ruleForm.date1,callback:function(a){s.$set(s.ruleForm,"date1",a)},expression:"ruleForm.date1"}})],1)],1),t("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),t("el-col",{attrs:{span:11}},[t("el-form-item",{attrs:{prop:"date2"}},[t("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.ruleForm.date2,callback:function(a){s.$set(s.ruleForm,"date2",a)},expression:"ruleForm.date2"}})],1)],1)],1),t("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[t("el-switch",{model:{value:s.ruleForm.delivery,callback:function(a){s.$set(s.ruleForm,"delivery",a)},expression:"ruleForm.delivery"}})],1),t("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[t("el-checkbox-group",{model:{value:s.ruleForm.type,callback:function(a){s.$set(s.ruleForm,"type",a)},expression:"ruleForm.type"}},[t("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[t("el-radio-group",{model:{value:s.ruleForm.resource,callback:function(a){s.$set(s.ruleForm,"resource",a)},expression:"ruleForm.resource"}},[t("el-radio",{attrs:{label:"Sponsorship"}}),t("el-radio",{attrs:{label:"Venue"}})],1)],1),t("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[t("el-input",{attrs:{type:"textarea"},model:{value:s.ruleForm.desc,callback:function(a){s.$set(s.ruleForm,"desc",a)},expression:"ruleForm.desc"}})],1),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.submitForm("ruleForm")}}},[s._v("Create")]),t("el-button",{on:{click:function(a){s.resetForm("ruleForm")}}},[s._v("Reset")])],1)],1)],1),t("p",[s._v("Sólo tiene que añadir el atributo "),t("code",[s._v("rules")]),s._v(" en el componente "),t("code",[s._v("Form")]),s._v(", pasar las reglas de validación y establecer el atributo "),t("code",[s._v("prop")]),s._v(" para "),t("code",[s._v("Form-Item")]),s._v(" como una clave específica que necesita ser validada. Ver más información en "),t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"rules"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.name"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"region"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.region"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.date1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.date2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Instant delivery"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"delivery"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.delivery"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Offline activities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Simple brand exposure"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"resource"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Sponsorship"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"desc"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.desc"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("Create"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("Reset"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ruleForm")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": [\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please input Activity name'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Length should be 3 to 5'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": [\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please select Activity zone'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": [\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please pick a date'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": [\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please pick a time'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'array'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please select at least one activity type'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": [\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please select activity resource'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": [\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please input activity form'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),t("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),t("p",[s._v("Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n Submit\n Reset\n \n\n\n',script:"\n export default {\n data() {\n var checkAge = (rule, value, callback) => {\n if (!value) {\n return callback(new Error('Please input the age'));\n }\n setTimeout(() => {\n if (!Number.isInteger(value)) {\n callback(new Error('Please input digits'));\n } else {\n if (value < 18) {\n callback(new Error('Age must be greater than 18'));\n } else {\n callback();\n }\n }\n }, 1000);\n };\n var validatePass = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('Please input the password'));\n } else {\n if (this.ruleForm2.checkPass !== '') {\n this.$refs.ruleForm2.validateField('checkPass');\n }\n callback();\n }\n };\n var validatePass2 = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('Please input the password again'));\n } else if (value !== this.ruleForm2.pass) {\n callback(new Error('Two inputs don\\'t match!'));\n } else {\n callback();\n }\n };\n return {\n ruleForm2: {\n pass: '',\n checkPass: '',\n age: ''\n },\n rules2: {\n pass: [\n { validator: validatePass, trigger: 'blur' }\n ],\n checkPass: [\n { validator: validatePass2, trigger: 'blur' }\n ],\n age: [\n { validator: checkAge, trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,"status-icon":"",rules:s.rules2,"label-width":"120px"}},[t("el-form-item",{attrs:{label:"Password",prop:"pass"}},[t("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.pass,callback:function(a){s.$set(s.ruleForm2,"pass",a)},expression:"ruleForm2.pass"}})],1),t("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[t("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.checkPass,callback:function(a){s.$set(s.ruleForm2,"checkPass",a)},expression:"ruleForm2.checkPass"}})],1),t("el-form-item",{attrs:{label:"Age",prop:"age"}},[t("el-input",{model:{value:s.ruleForm2.age,callback:function(a){s.$set(s.ruleForm2,"age",s._n(a))},expression:"ruleForm2.age"}})],1),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.submitForm("ruleForm2")}}},[s._v("Submit")]),t("el-button",{on:{click:function(a){s.resetForm("ruleForm2")}}},[s._v("Reset")])],1)],1)],1),t("p",[s._v("Aquí utilizamos el "),t("code",[s._v("status-icon")]),s._v(" para reflejar el resultado de la validación como un icono.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status-icon")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"rules2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Password"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"pass"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"password"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2.pass"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Confirm"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkPass"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"password"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2.checkPass"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Age"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model.number")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2.age"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("Submit"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("Reset"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" checkAge = "),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!value) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" callback("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please input the age'")]),s._v("));\n }\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v(".isInteger(value)) {\n callback("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please input digits'")]),s._v("));\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value < "),t("span",{attrs:{class:"hljs-number"}},[s._v("18")]),s._v(") {\n callback("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Age must be greater than 18'")]),s._v("));\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n callback();\n }\n }\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(");\n };\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" validatePass = "),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value === "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n callback("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please input the password'")]),s._v("));\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),t("span",{attrs:{class:"hljs-string"}},[s._v("'checkPass'")]),s._v(");\n }\n callback();\n }\n };\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" validatePass2 = "),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value === "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n callback("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please input the password again'")]),s._v("));\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value !== "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".ruleForm2.pass) {\n callback("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Two inputs don\\'t match!'")]),s._v("));\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n callback();\n }\n };\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ruleForm2")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("pass")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkPass")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("rules2")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("pass")]),s._v(": [\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": validatePass, "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkPass")]),s._v(": [\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": validatePass2, "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": [\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": checkAge, "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),t("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n Delete\n \n \n Submit\n New domain\n Reset\n \n\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"120px"}},[t("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:"blur,change"}]}},[t("el-input",{model:{value:s.dynamicValidateForm.email,callback:function(a){s.$set(s.dynamicValidateForm,"email",a)},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(a,l){return t("el-form-item",{key:a.key,attrs:{label:"Domain"+l,prop:"domains."+l+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[t("el-input",{model:{value:a.value,callback:function(t){s.$set(a,"value",t)},expression:"domain.value"}}),t("el-button",{on:{click:function(t){t.preventDefault(),s.removeDomain(a)}}},[s._v("Delete")])],1)}),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.submitForm("dynamicValidateForm")}}},[s._v("Submit")]),t("el-button",{on:{click:s.addDomain}},[s._v("New domain")]),t("el-button",{on:{click:function(a){s.resetForm("dynamicValidateForm")}}},[s._v("Reset")])],1)],2)],1),t("p",[s._v("Además de pasar todas las reglas de validación al mismo tiempo en el componente "),t("code",[s._v("form")]),s._v(", también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"email"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Email"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"[\n { required: true, message: 'Please input email address', trigger: 'blur' },\n { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }\n ]\"")]),s._v("\n >")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"'Domain' + index\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"domain.key"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n required: true, message: 'domain can not be null', trigger: 'blur'\n }\"")]),s._v("\n >")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"domain.value"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click.prevent")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("Delete"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Submit"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"addDomain"')]),s._v(">")]),s._v("New domain"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Reset"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("dynamicValidateForm")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("domains")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),t("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n },\n removeDomain(item) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" index = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item);\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index !== "),t("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n }\n },\n addDomain() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v(".now(),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n Submit\n Reset\n \n\n\n',script:"\n export default {\n data() {\n return {\n numberValidateForm: {\n age: ''\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[t("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[t("el-input",{attrs:{type:"age","auto-complete":"off"},model:{value:s.numberValidateForm.age,callback:function(a){s.$set(s.numberValidateForm,"age",s._n(a))},expression:"numberValidateForm.age"}})],1),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.submitForm("numberValidateForm")}}},[s._v("Submit")]),t("el-button",{on:{click:function(a){s.resetForm("numberValidateForm")}}},[s._v("Reset")])],1)],1)],1),t("p",[s._v("La validacion numerica necesita un modificador "),t("code",[s._v(".number")]),s._v(" añadido en el enlace "),t("code",[s._v("v-model")]),s._v(" de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"numberValidateForm"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"numberValidateForm"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"[\n { required: true, message: 'age is required'},\n { type: 'number', message: 'age must be a number'}\n ]\"")]),s._v("\n >")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model.number")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"numberValidateForm.age"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("Submit"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("Reset"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("numberValidateForm")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),t("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),s._m(13),s._m(14),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Cancel\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n sizeForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n }\n };\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"form",attrs:{model:s.sizeForm,"label-width":"120px",size:"mini"}},[t("el-form-item",{attrs:{label:"Activity name"}},[t("el-input",{model:{value:s.sizeForm.name,callback:function(a){s.$set(s.sizeForm,"name",a)},expression:"sizeForm.name"}})],1),t("el-form-item",{attrs:{label:"Activity zone"}},[t("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.sizeForm.region,callback:function(a){s.$set(s.sizeForm,"region",a)},expression:"sizeForm.region"}},[t("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t("el-form-item",{attrs:{label:"Activity time"}},[t("el-col",{attrs:{span:11}},[t("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.sizeForm.date1,callback:function(a){s.$set(s.sizeForm,"date1",a)},expression:"sizeForm.date1"}})],1),t("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),t("el-col",{attrs:{span:11}},[t("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.sizeForm.date2,callback:function(a){s.$set(s.sizeForm,"date2",a)},expression:"sizeForm.date2"}})],1)],1),t("el-form-item",{attrs:{label:"Activity type"}},[t("el-checkbox-group",{model:{value:s.sizeForm.type,callback:function(a){s.$set(s.sizeForm,"type",a)},expression:"sizeForm.type"}},[t("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t("el-form-item",{attrs:{label:"Resources"}},[t("el-radio-group",{attrs:{size:"medium"},model:{value:s.sizeForm.resource,callback:function(a){s.$set(s.sizeForm,"resource",a)},expression:"sizeForm.resource"}},[t("el-radio",{attrs:{border:"",label:"Sponsor"}}),t("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t("el-form-item",{attrs:{size:"large"}},[t("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),t("el-button",[s._v("Cancel")])],1)],1)],1),t("p",[s._v("Aún así, puede ajustar el "),t("code",[s._v("size")]),s._v(" de cada componente si no desea que herede su tamaño de From o FormItem.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.name"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.region"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.date1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.date2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.type"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sizeForm.resource"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Sponsor"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"large"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("sizeForm")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Form consiste en "),t("code",{pre:!0},[s._v("input")]),s._v(", "),t("code",{pre:!0},[s._v("radio")]),s._v(", "),t("code",{pre:!0},[s._v("select")]),s._v(", "),t("code",{pre:!0},[s._v("checkbox")]),s._v(", etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"form-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Incluye todo tipo de entradas, tales como "),t("code",{pre:!0},[s._v("input")]),s._v(", "),t("code",{pre:!0},[s._v("select")]),s._v(", "),t("code",{pre:!0},[s._v("radio")]),s._v(" y "),t("code",{pre:!0},[s._v("checkbox")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[t("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[s._v("W3C")]),s._v(" reglamenta que")]),t("blockquote",[t("p",[t("i",[s._v("Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar "),t("b",[s._v("Enter")]),s._v(" en ese campo como una solicitud para enviar el formulario.")])])]),t("p",[s._v("Para prevenir este comportamiento, puede agregar "),t("code",{pre:!0},[s._v("@submit.native.prevent")]),s._v(" on "),t("code",{pre:!0},[s._v("")]),s._v(".")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"formulario-inline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulario-inline","aria-hidden":"true"}},[s._v("¶")]),s._v(" Formulario inline")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"alineamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alineamiento","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alineamiento")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"validacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Validación")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("El componente "),t("code",{pre:!0},[s._v("form")]),s._v(" le permite verificar sus datos, ayudándole a encontrar y corregir errores.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"reglas-personalizadas-de-validacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#reglas-personalizadas-de-validacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Reglas personalizadas de validación")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eliminar-o-agregar-validaciones-dinamicamente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eliminar-o-agregar-validaciones-dinamicamente","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eliminar o agregar validaciones dinamicamente")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"validacion-numerica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validacion-numerica","aria-hidden":"true"}},[s._v("¶")]),s._v(" Validación numerica")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("Cuando un "),t("code",{pre:!0},[s._v("el-form-item")]),s._v(" está anidado en otro "),t("code",{pre:!0},[s._v("el-form-item")]),s._v(", su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese "),t("code",{pre:!0},[s._v("el-form-item")]),s._v(".")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tamano-del-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano-del-control","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tamaño del control")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Todos los componentes de un formulario heredan su atributo "),t("code",{pre:!0},[s._v("size")]),s._v(". De manera similar, FormItem también tiene un atributo "),t("code",{pre:!0},[s._v("size")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"form-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("model")]),t("td",[s._v("Datos del componente")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("rules")]),t("td",[s._v("Reglas de validación")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inline")]),t("td",[s._v("Si el form es inline")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("label-position")]),t("td",[s._v("Posicion de la etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("left / right / top")]),t("td",[s._v("right")])]),t("tr",[t("td",[s._v("label-width")]),t("td",[s._v("ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label-suffix")]),t("td",[s._v("sufijo de la etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-message")]),t("td",[s._v("si mostrar o no el mensaje de error")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("inline-message")]),t("td",[s._v("si desea visualizar el mensaje de error inline con la posición del form item")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("status-icon")]),t("td",[s._v("si desea visualizar un icono que indique el resultado de la validación")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("validate-on-rule-change")]),t("td",[s._v("si se dispara la validacion cuando el prop "),t("code",{pre:!0},[s._v("rules")]),s._v(" cambia")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("el tamaño de los componentes en este form")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si se desactivan todos los componentes del formulario. Si esta en "),t("code",{pre:!0},[s._v("true")]),s._v(" no puede ser cambiado por el prop "),t("code",{pre:!0},[s._v("disabled")]),s._v(" individual de los componentes.")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"form-metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-metodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Metodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("validate")]),t("td",[s._v("el método para validar todo el formulario. Devuelve una promesa si se omite el return")]),t("td",[s._v("Function(callback: Function(boolean))")])]),t("tr",[t("td",[s._v("validateField")]),t("td",[s._v("el método para validar un determinado form item")]),t("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),t("tr",[t("td",[s._v("resetFields")]),t("td",[s._v("restablece todos los campos y elimina el resultado de validación")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("clearValidate")]),t("td",[s._v("limpia mensaje de validación para todos los campos")]),t("td",[s._v("-")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"form-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("prop")]),t("td",[s._v("un key de "),t("code",{pre:!0},[s._v("model")]),s._v(". En el uso del método validate and resetFields, el atributo es obligatorio.")]),t("td",[s._v("string")]),t("td",[s._v("keys of model that passed to "),t("code",{pre:!0},[s._v("form")])]),t("td")]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label-width")]),t("td",[s._v("ancho de la etiqueta, e.g. '50px'")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("required")]),t("td",[s._v("si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite.")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("rules")]),t("td",[s._v("reglas de validacion del form")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("error")]),t("td",[s._v("mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente.")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-message")]),t("td",[s._v("si mostrar o no el mensaje de error")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("inline-message")]),t("td",[s._v("mensaje de validación estilo inline")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("Tamaño de los componentes en este form item")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("-")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Slot")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("contenido del Form Item")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("contenido de la etiqueta")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"form-item-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-metodo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Metodo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("resetField")]),t("td",[s._v("restablecer campo actual y eliminar resultado de validación")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1362)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1363),e=t(0),n=e(null,l.a,!1,null,null,null);a.default=n.exports},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"internacionalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#internacionalizacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internacionalización")]),t("p",[s._v("El idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),t("p",[s._v("O si está importando Element a petición:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" lang "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),t("p",[s._v("El paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con "),t("code",{pre:!0},[s._v("NormalModuleReplacementPlugin")]),s._v(" proporcionado por el webpack puede reemplazar la localización predeterminada:")]),t("p",[s._v("webpack.config.js")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[s._v("{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plugins")]),s._v(": [\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n ]\n}\n")])]),t("h2",{attrs:{id:"compatible-con"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible con "),t("code",{pre:!0},[s._v("vue-i18n@5.x")])]),t("p",[s._v("Element es compatible con "),t("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v(", lo que facilita aún más la conmutación multilingüe.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),t("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v("\nVue.locale("),t("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),t("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", enLocale)\n")])]),t("h2",{attrs:{id:"compatible-con-otros-plugins-i18n"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-otros-plugins-i18n","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible con otros plugins i18n")]),t("p",[s._v("Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),t("span",{attrs:{class:"hljs-params"}},[s._v("path, options")]),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n }\n})\n")])]),t("h2",{attrs:{id:"compatible-con-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible con "),t("code",{pre:!0},[s._v("vue-i18n@6.x")])]),t("p",[s._v("Necesita manejarlo manualmente para ser compatible con "),t("code",{pre:!0},[s._v("6.x")]),s._v(".")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" messages = {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n ...enLocale "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Or use `Object.assign({ message: 'hello' }, enLocale)`")]),s._v("\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n ...zhLocale "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Or use `Object.assign({ message: '你好' }, zhLocale)`")]),s._v("\n }\n}\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" i18n = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n messages, "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value)\n})\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),t("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(")\n")])]),t("h2",{attrs:{id:"personalizacion-de-i18n-en-componentes-bajo-peticion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-de-i18n-en-componentes-bajo-peticion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Personalización de i18n en componentes bajo petición")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" DatePicker "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element/lib/date-picker'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" messages = {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n ...enLocale\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n ...zhLocale\n }\n}\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" i18n = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n messages, "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nElementLocale.i18n("),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value))\n")])]),t("h2",{attrs:{id:"importar-via-cdn"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importar-via-cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" Importar via CDN")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),t("span",{attrs:{class:"undefined"}}),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),t("span",{attrs:{class:"undefined"}}),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),t("span",{attrs:{class:"undefined"}}),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"undefined"}},[s._v("\n ELEMENT.locale(ELEMENT.lang.en)\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),t("p",[s._v("Compatible con "),t("code",{pre:!0},[s._v("vue-i18n")])]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),t("span",{attrs:{class:"undefined"}}),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),t("span",{attrs:{class:"undefined"}}),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),t("span",{attrs:{class:"undefined"}}),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),t("span",{attrs:{class:"undefined"}}),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),t("span",{attrs:{class:"undefined"}}),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"actionscript"}},[s._v("\n Vue.locale("),t("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n Vue.locale("),t("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),t("p",[s._v("Actualmente Element está disponible en los siguientes idiomas:")]),t("ul",{staticClass:"language-list"},[t("li",[s._v("Simplified Chinese (zh-CN)")]),t("li",[s._v("English (en)")]),t("li",[s._v("German (de)")]),t("li",[s._v("Portuguese (pt)")]),t("li",[s._v("Spanish (es)")]),t("li",[s._v("Danish (da)")]),t("li",[s._v("French (fr)")]),t("li",[s._v("Norwegian (nb-NO)")]),t("li",[s._v("Traditional Chinese (zh-TW)")]),t("li",[s._v("Italian (it)")]),t("li",[s._v("Korean (ko)")]),t("li",[s._v("Japanese (ja)")]),t("li",[s._v("Dutch (nl)")]),t("li",[s._v("Vietnamese (vi)")]),t("li",[s._v("Russian (ru-RU)")]),t("li",[s._v("Turkish (tr-TR)")]),t("li",[s._v("Brazilian Portuguese (pt-br)")]),t("li",[s._v("Farsi (fa)")]),t("li",[s._v("Thai (th)")]),t("li",[s._v("Indonesian (id)")]),t("li",[s._v("Bulgarian (bg)")]),t("li",[s._v("Polish (pl)")]),t("li",[s._v("Finnish (fi)")]),t("li",[s._v("Swedish (sv-SE)")]),t("li",[s._v("Greek (el)")]),t("li",[s._v("Slovak (sk)")]),t("li",[s._v("Catalunya (ca)")]),t("li",[s._v("Czech (cs-CZ)")]),t("li",[s._v("Ukrainian (ua)")]),t("li",[s._v("Turkmen (tk)")]),t("li",[s._v("Tamil (ta)")]),t("li",[s._v("Latvian (lv)")]),t("li",[s._v("Afrikaans (af-ZA)")]),t("li",[s._v("Estonian (ee)")]),t("li",[s._v("Slovenian (sl)")]),t("li",[s._v("Arabic (ar)")]),t("li",[s._v("Hebrew (he)")]),t("li",[s._v("Lithuanian (lt)")]),t("li",[s._v("Mongolian (mn)")]),t("li",[s._v("Kazakh (kz)")]),t("li",[s._v("Hungarian (hu)")]),t("li",[s._v("Romanian (ro)")]),t("li",[s._v("Kurdish (ku)")])]),t("p",[s._v("Si su idioma de destino no está incluido, puede contribuir: simplemente añada "),t("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[s._v("aqui")]),s._v(" otra configuración de idioma y cree un pull request.")])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1365)},function(s,a,t){"use strict";function l(s){t(1366)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1368),n=t.n(e),r=t(1369),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1367);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("63ccb88c",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,'.demo-icon .source>i{color:#606266;margin:0 20px;font-size:1.5em;vertical-align:middle}.demo-icon .source>button{margin:0 20px}.page-component .content>ul.icon-list{overflow:hidden;list-style:none;padding:0;border:1px solid #eaeefb;border-radius:4px}.icon-list li{float:left;width:16.66%;text-align:center;height:120px;line-height:120px;color:#666;font-size:13px;transition:color .15s linear;border-right:1px solid #eee;border-bottom:1px solid #eee;margin-right:-1px;margin-bottom:-1px}.icon-list li:after{content:"";height:100%}.icon-list li:after,.icon-list li span{display:inline-block;vertical-align:middle}.icon-list li span{line-height:normal;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#99a9bf}.icon-list li i{display:block;font-size:32px;margin-bottom:15px;color:#606266}.icon-list li .icon-name{display:inline-block;padding:0 3px;height:1em;color:#606266}.icon-list li:hover{color:#5cb6ff}',""])},function(s,a,t){"use strict";a.__esModule=!0;var l=t(629);a.default={data:function(){return{icons:l}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Element proporciona un conjunto de iconos propios.")]),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("i",{staticClass:"el-icon-edit"}),t("i",{staticClass:"el-icon-share"}),t("i",{staticClass:"el-icon-delete"}),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[s._v("Search")])],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),s._v("Search"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n")])])])]),s._m(3),t("ul",{staticClass:"icon-list"},s._l(s.icons,function(a){return t("li",{key:a},[t("span",[t("i",{class:"el-icon-"+a}),t("span",{staticClass:"icon-name"},[s._v(s._s("el-icon-"+a))])])])}))],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Simplemente asigna el nombre de la clase a "),t("code",{pre:!0},[s._v("el-icon-iconName")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#iconos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Iconos")])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1371)},function(s,a,t){"use strict";function l(s){t(1372)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1374),n=t.n(e),r=t(1375),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1373);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("31bbddab",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-box.demo-input-number .el-input-number+.el-input-number{margin-left:10px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1,num7:1,num8:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Input de valores numéricos con un rango personalizable.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num1: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value)\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-input-number",{attrs:{min:1,max:10},on:{change:s.handleChange},model:{value:s.num1,callback:function(a){s.num1=a},expression:"num1"}})]],2),t("p",[s._v("Vincule una variable con "),t("code",[s._v("v-model")]),s._v(" en el elemento y estará listo.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"num1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("num1")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value)\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(a){s.num2=a},expression:"num2"}})]],2),t("p",[s._v("El atributo "),t("code",[s._v("disabled")]),s._v(" acepta un valor "),t("code",[s._v("boolean")]),s._v(", y si el valor es "),t("code",[s._v("true")]),s._v(", el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo "),t("code",[s._v("min")]),s._v(" para establecer el valor mínimo y un valor "),t("code",[s._v("max")]),s._v(" para establecer el valor máximo. Por defecto, el valor mínimo es "),t("code",[s._v("0")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"num2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("num2")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Le permite definir el nivel de incremento de los saltos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num3: 5\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(a){s.num3=a},expression:"num3"}})]],2),t("p",[s._v("Añada el atributo "),t("code",[s._v("step")]),s._v(" para establecer el salto.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"num3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("num3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v("\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num4: 1,\n num5: 1,\n num6: 1,\n num7: 1\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-input-number",{model:{value:s.num4,callback:function(a){s.num4=a},expression:"num4"}}),t("el-input-number",{attrs:{size:"medium"},model:{value:s.num5,callback:function(a){s.num5=a},expression:"num5"}}),t("el-input-number",{attrs:{size:"small"},model:{value:s.num6,callback:function(a){s.num6=a},expression:"num6"}}),t("el-input-number",{attrs:{size:"mini"},model:{value:s.num7,callback:function(a){s.num7=a},expression:"num7"}})]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"num4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"num5"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"num6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"num7"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("num4")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("num5")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("num6")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("num7")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num8: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:s.handleChange},model:{value:s.num8,callback:function(a){s.num8=a},expression:"num8"}})]],2),t("p",[s._v("Establezca "),t("code",[s._v("controls-position")]),s._v(" para decidir la posición de los botones de control.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"num8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("controls-position")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("num8")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tamano"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tamaño")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Utilice el atributo "),t("code",{pre:!0},[s._v("size")]),s._v(" para establecer tamaños adicionales con "),t("code",{pre:!0},[s._v("medium")]),s._v(", "),t("code",{pre:!0},[s._v("small")]),s._v(" o "),t("code",{pre:!0},[s._v("mini")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"posicion-de-los-controles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-los-controles","aria-hidden":"true"}},[s._v("¶")]),s._v(" Posición de los controles")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value")]),t("td",[s._v("valor vinculado")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("el valor mínimo permitido")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[t("code",{pre:!0},[s._v("-Infinity")])])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("el valor maximo permitido")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[t("code",{pre:!0},[s._v("Infinity")])])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("incremento (salto)")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("1")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del componente")]),t("td",[s._v("string")]),t("td",[s._v("large/small")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el componente esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("controls")]),t("td",[s._v("si se activan los botones de control")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("controls-position")]),t("td",[s._v("posición de los botones de control")]),t("td",[s._v("string")]),t("td",[s._v("right")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("lo mismo que "),t("code",{pre:!0},[s._v("name")]),s._v(" en un input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("texto de la etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se produce cuando el valor cambia")]),t("td",[s._v("value after change")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("se produce cuando el componente pierde el foco")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("se produce cuando el componente obtiene el foco")]),t("td",[s._v("(event: Event)")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Métodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Método")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetro")])])]),t("tbody",[t("tr",[t("td",[s._v("focus")]),t("td",[s._v("coloca el foco en el elemento actual")]),t("td",[s._v("-")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1377)},function(s,a,t){"use strict";function l(s){t(1378)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1380),n=t.n(e),r=t(1381),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1379);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("0fda7adb",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-input.demo-es .el-select .el-input{width:130px}.demo-input.demo-es .el-input{width:180px}.demo-input.demo-es .el-textarea{width:414px}.demo-input.demo-es .el-input-group{width:100%}.demo-input.demo-es .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-es .demo-input-suffix{padding:10px}.demo-input.demo-es .demo-input-suffix .el-input{margin-right:15px}.demo-input.demo-es .demo-input-label{display:inline-block;width:130px}.demo-input.demo-es .input-with-select .el-input-group__prepend{background-color:#fff}.demo-input.demo-es .demo-autocomplete{text-align:center}.demo-input.demo-es .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-es .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-es .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{links:[],input:"",input1:"",input2:"",input21:"",input22:"",input23:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearch:function(s,a){var t=this.links;a(s?t.filter(this.createStateFilter(s)):t)},querySearchAsync:function(s,a){var t=this.links,l=s?t.filter(this.createStateFilter(s)):t;clearTimeout(this.timeout),this.timeout=setTimeout(function(){a(l)},3e3*Math.random())},createStateFilter:function(s){return function(a){return 0===a.value.toLowerCase().indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Ingresa datos usando el ratón o teclado.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\nexport default {\n data() {\n return {\n input: ''\n }\n }\n}\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input,callback:function(a){s.input=a},expression:"input"}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input1: ''\n }\n }\n}\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:s.input1,callback:function(a){s.input1=a},expression:"input1"}})],1),t("p",[s._v("Deshabilite el Input con el atributo "),t("code",[s._v("disabled")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Añada un icono para indicar el tipo de Input.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Using attributes\n \n \n \n \n
    \n
    \n Using slots\n \n \n \n \n \n \n
    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input2: '',\n input21: '',\n input22: '',\n input23: ''\n }\n }\n}\n",style:"\n .demo-input-label {\n display: inline-block;\n width: 130px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"demo-input-suffix"},[t("span",{staticClass:"demo-input-label"},[s._v("Using attributes")]),t("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:s.input2,callback:function(a){s.input2=a},expression:"input2"}}),t("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:s.input21,callback:function(a){s.input21=a},expression:"input21"}})],1),t("div",{staticClass:"demo-input-suffix"},[t("span",{staticClass:"demo-input-label"},[s._v("Using slots")]),t("el-input",{attrs:{placeholder:"Pick a date"},model:{value:s.input22,callback:function(a){s.input22=a},expression:"input22"}},[t("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t("el-input",{attrs:{placeholder:"Type something"},model:{value:s.input23,callback:function(a){s.input23=a},expression:"input23"}},[t("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)]),t("p",[s._v("Para añadir iconos en el Input, puede utilizar los atributos "),t("code",[s._v("prefix-icon")]),s._v(" y "),t("code",[s._v("suffix-icon")]),s._v(" . Además, los slots con nombre "),t("code",[s._v("prefix")]),s._v(" y "),t("code",[s._v("suffix")]),s._v(" también funcionan.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-label"')]),s._v(">")]),s._v("Using attributes"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("suffix-icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Type something"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prefix-icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input21"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-label"')]),s._v(">")]),s._v("Using slots"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input22"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"suffix"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-input__icon el-icon-date"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Type something"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input23"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"prefix"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-input__icon el-icon-search"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".demo-input-label")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": inline-block;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("130px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input21")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input22")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input23")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea: ''\n }\n }\n}\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:s.textarea,callback:function(a){s.textarea=a},expression:"textarea"}})],1),t("p",[s._v("Controle la altura ajustando el prop "),t("code",[s._v("rows")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":rows")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("textarea")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n
    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea2: '',\n textarea3: ''\n }\n }\n}\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:s.textarea2,callback:function(a){s.textarea2=a},expression:"textarea2"}}),t("div",{staticStyle:{margin:"20px 0"}}),t("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:s.textarea3,callback:function(a){s.textarea3=a},expression:"textarea3"}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("autosize")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 20px 0;"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":autosize")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("textarea2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("textarea3")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Añade un elemento antes o después del input, generalmente una etiqueta o un botón.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n \n
    \n\n\n\n',script:"\nexport default {\n data() {\n return {\n input3: '',\n input4: '',\n input5: '',\n select: ''\n }\n }\n}\n",style:"\n .el-select .el-input {\n width: 110px;\n }\n .input-with-select .el-input-group__prepend {\n background-color: #fff;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",[t("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input3,callback:function(a){s.input3=a},expression:"input3"}},[t("template",{attrs:{slot:"prepend"},slot:"prepend"},[s._v("Http://")])],2)],1),t("div",{staticStyle:{"margin-top":"15px"}},[t("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input4,callback:function(a){s.input4=a},expression:"input4"}},[t("template",{attrs:{slot:"append"},slot:"append"},[s._v(".com")])],2)],1),t("div",{staticStyle:{"margin-top":"15px"}},[t("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:s.input5,callback:function(a){s.input5=a},expression:"input5"}},[t("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:s.select,callback:function(a){s.select=a},expression:"select"}},[t("el-option",{attrs:{label:"Restaurant",value:"1"}}),t("el-option",{attrs:{label:"Order No.",value:"2"}}),t("el-option",{attrs:{label:"Tel",value:"3"}})],1),t("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)]),t("p",[s._v("Utilice el "),t("code",[s._v("slot")]),s._v(" para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"append"')]),s._v(">")]),s._v(".com"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input5"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input-with-select"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"select"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"prepend"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Restaurant"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Order No."')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Tel"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"append"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-input")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("110px")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".input-with-select")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-input-group__prepend")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input3")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input4")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input5")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("select")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n \n \n \n \n \n
    \n\n\n',script:"\nexport default {\n data() {\n return {\n input6: '',\n input7: '',\n input8: '',\n input9: ''\n }\n }\n}\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"demo-input-size"},[t("el-input",{attrs:{placeholder:"Please Input"},model:{value:s.input6,callback:function(a){s.input6=a},expression:"input6"}}),t("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:s.input7,callback:function(a){s.input7=a},expression:"input7"}}),t("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:s.input8,callback:function(a){s.input8=a},expression:"input8"}}),t("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:s.input9,callback:function(a){s.input9=a},expression:"input9"}})],1)]),t("p",[s._v("Añada el atributo "),t("code",[s._v("size")]),s._v(" para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: "),t("code",[s._v("large")]),s._v(", "),t("code",[s._v("small")]),s._v(" y "),t("code",[s._v("mini")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input6"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input7"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input8"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input9"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input6")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input7")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input8")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("input9")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),t("p",[s._v("Puede obtener algunas sugerencias basadas en la entrada actual.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    list suggestions when activated
    \n \n     \n \n
    list suggestions on input
    \n \n     \n    \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.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n',style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{staticClass:"demo-autocomplete"},[t("el-col",{attrs:{span:12}},[t("div",{staticClass:"sub-title"},[s._v("list suggestions when activated")]),t("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input"},on:{select:s.handleSelect},model:{value:s.state1,callback:function(a){s.state1=a},expression:"state1"}})],1),t("el-col",{attrs:{span:12}},[t("div",{staticClass:"sub-title"},[s._v("list suggestions on input")]),t("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:s.handleSelect},model:{value:s.state2,callback:function(a){s.state2=a},expression:"state2"}})],1)],1)],1),t("p",[s._v("El componente Autocomplete proporciona sugerencias de entrada. El atributo "),t("code",[s._v("fetch-suggestions")]),s._v(" es un método que devuelve la entrada sugerida. En este ejemplo, "),t("code",[s._v("querySearch(queryString, cb)")]),s._v(" devuelve las sugerencias al componente mediante "),t("code",[s._v("cb(data)")]),s._v(" cuando están listas.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions when activated"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"inline-input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"state1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n >")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions on input"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"inline-input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"state2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":trigger-on-focus")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n >")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? links.filter("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// call callback function to return suggestions")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),t("p",[s._v("Personalice cómo se muestran las sugerencias.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n\n\n\n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state3: \'\'\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 suggestion objects\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n },\n handleIconClick(ev) {\n console.log(ev);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n',style:"\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,placeholder:"Please input"},on:{select:s.handleSelect},scopedSlots:s._u([{key:"default",fn:function(a){return[t("div",{staticClass:"value"},[s._v(s._s(a.item.value))]),t("span",{staticClass:"link"},[s._v(s._s(a.item.link))])]}}]),model:{value:s.state3,callback:function(a){s.state3=a},expression:"state3"}},[t("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:s.handleIconClick},slot:"suffix"})])],1),t("p",[s._v("Utilice "),t("code",[s._v("scoped slot")]),s._v(" para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave "),t("code",[s._v("item")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("popper-class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"my-autocomplete"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"state3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit el-input__icon"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"suffix"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(">")]),s._v("{{ props.item.value }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(">")]),s._v("{{ props.item.link }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"undefined"}},[s._v("\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state3")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? links.filter("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// call callback function to return suggestion objects")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n },\n handleIconClick(ev) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(ev);\n }\n },\n mounted() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),t("p",[s._v("Búsqueda de datos desde el servidor.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state4: \'\',\n timeout: null\n };\n },\n methods: {\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n querySearchAsync(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n cb(results);\n }, 3000 * Math.random());\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n };\n',style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"Please input"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(a){s.state4=a},expression:"state4"}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"state4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"querySearchAsync"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n>")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state4")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("timeout")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n loadAll() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n querySearchAsync(queryString, cb) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? links.filter("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n\n clearTimeout("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timeout);\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timeout = setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n cb(results);\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(" * "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random());\n },\n createFilter(queryString) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n handleSelect(item) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[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),s._m(23),s._m(24),s._m(25),s._m(26)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"input-con-icono"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-con-icono","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input con icono")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Textarea")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Redimensiona para introducir varias líneas de información de texto. Agrege el atributo "),t("code",{pre:!0},[s._v('type="textarea"')]),s._v(" para cambiar el "),t("code",{pre:!0},[s._v("input")]),s._v(" al tipo nativo "),t("code",{pre:!0},[s._v("textarea")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"textarea-tamano-automatico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea-tamano-automatico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Textarea tamaño automatico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("El ajuste del prop "),t("code",{pre:!0},[s._v("autosize")]),s._v(" en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"mezclando-elementos-con-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mezclando-elementos-con-input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Mezclando elementos con input")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tamano"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tamaño")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"autocompletado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocompletado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocompletado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"template-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personalizado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Template personalizado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"busqueda-remota"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[s._v("¶")]),s._v(" Búsqueda remota")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"input-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de input")]),t("td",[s._v("string")]),t("td",[s._v("text / textarea")]),t("td",[s._v("text")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("maxlength")]),t("td",[s._v("el maximo para el largo del texto")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("minlength")]),t("td",[s._v("el mínimo para el largo del texto")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder del Input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del input, esto no funciona cuando "),t("code",{pre:!0},[s._v("type")]),s._v(" no es textarea")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("prefix-icon")]),t("td",[s._v("clase del icono de prefijo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("suffix-icon")]),t("td",[s._v("clase del icono de sufijo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("rows")]),t("td",[s._v("número de filas, sólo funciona cuando "),t("code",{pre:!0},[s._v("type")]),s._v(" es 'textarea'.")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("2")])]),t("tr",[t("td",[s._v("autosize")]),t("td",[s._v("si textarea tiene una altura adaptativa, sólo funciona cuando el"),t("code",{pre:!0},[s._v("type")]),s._v(" es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 }")]),t("td",[s._v("boolean / object")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("auto-complete")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("auto-complete")]),s._v(" en el input nativo")]),t("td",[s._v("string")]),t("td",[s._v("on/off")]),t("td",[s._v("off")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("name")]),s._v(" en el input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("readonly")]),s._v(" en el input nativo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("max")]),s._v(" en el input nativo")]),t("td",[s._v("—")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("min")]),s._v(" en el input nativo")]),t("td",[s._v("—")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("step")]),s._v(" en el input nativo")]),t("td",[s._v("—")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("resize")]),t("td",[s._v("control para el dimensionamiento")]),t("td",[s._v("string")]),t("td",[s._v("none, both, horizontal, vertical")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("autofocus")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("autofocus")]),s._v(" en el input nativo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("form")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("form")]),s._v(" en el input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("texto de la etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("tabindex")]),t("td",[s._v("orden de tabulacion para el Input")]),t("td",[s._v("string")]),t("td",[s._v("-")]),t("td",[s._v("-")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input slots")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")])])]),t("tbody",[t("tr",[t("td",[s._v("prefix")]),t("td",[s._v("contenido como prefijo del input")])]),t("tr",[t("td",[s._v("suffix")]),t("td",[s._v("contenido como sufijo del input")])]),t("tr",[t("td",[s._v("prepend")]),t("td",[s._v("contenido antes del input")])]),t("tr",[t("td",[s._v("append")]),t("td",[s._v("contenido a añadir después del input")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"input-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("blur")]),t("td",[s._v("Se dispara cuando se pierde el foco")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("Se dispara cuando se obtiene el foco")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("change")]),t("td",[s._v("se activa cuando cambia el valor de entrada")]),t("td",[s._v("(value: string | number)")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"autocomplete-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Opciones")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("el placeholder del Autocomplete")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el Autocompete esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value-key")]),t("td",[s._v("nombre del campo del objeto de sugerencia del input para la visualización")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("value")])]),t("tr",[t("td",[s._v("icon")]),t("td",[s._v("nombre del icono")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("debounce")]),t("td",[s._v("retardo al escribir, en milisegundos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])]),t("tr",[t("td",[s._v("fetch-suggestions")]),t("td",[s._v("un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar "),t("code",{pre:!0},[s._v("callback(data:[])")]),s._v(" para devolverlas a Autocomplete")]),t("td",[s._v("Function(queryString, callback)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre personalizado de clase para el dropdown de autocomplete")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("trigger-on-focus")]),t("td",[s._v("si se deben mostrar sugerencias cuando el input obtiene el foco")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("on-icon-click")]),t("td",[s._v("funcion que se invoca cuando se hace click en el icono")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("name")]),s._v(" en el input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("select-when-unmatched")]),t("td",[s._v("si se emite un evento "),t("code",{pre:!0},[s._v("select")]),s._v(" al pulsar enter cuando no hay coincidencia de Autocomplete")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("texto de la etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete slots")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")])])]),t("tbody",[t("tr",[t("td",[s._v("prefix")]),t("td",[s._v("contenido como prefijo del input")])]),t("tr",[t("td",[s._v("suffix")]),t("td",[s._v("contenido como sufijo del input")])]),t("tr",[t("td",[s._v("prepend")]),t("td",[s._v("contenido antes del input")])]),t("tr",[t("td",[s._v("append")]),t("td",[s._v("contenido a añadir después del input")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"autocomplete-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("select")]),t("td",[s._v("se dispara cuando se hace click a una sugerencia")]),t("td",[s._v("sugerencia en la que se está haciendo click")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Metodo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("focus")]),t("td",[s._v("coloca el foco en el elemento")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1383)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1384),e=t(0),n=e(null,l.a,!1,null,null,null);a.default=n.exports},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"instalacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Instalación")]),t("h3",{attrs:{id:"npm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm")]),t("p",[s._v("Instalar mediante npm es la forma recomendada ya que se integra facilmente con "),t("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(".")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-shell"}},[s._v("npm i element-ui -S\n")])]),t("h3",{attrs:{id:"cdn"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),t("p",[s._v("Obtenga la última versión desde "),t("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[s._v("unpkg.com/element-ui")]),s._v(" , e importe el JavaScript y los archivos CSS en su página.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import CSS --\x3e")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("link")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("rel")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"stylesheet"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/theme-chalk/index.css"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import JavaScript --\x3e")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),t("span",{attrs:{class:"undefined"}}),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),t("p",[s._v("##Tip\nRecomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a "),t("a",{attrs:{href:"https://unpkg.com"}},[s._v("unpkg.com")]),s._v(" para más información.")]),t("h3",{attrs:{id:"hello-world"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),t("p",[s._v("Si esta usando un CDN, una página con Hello-World es fácil con Element. "),t("a",{attrs:{href:"https://jsfiddle.net/hzfpyvg6/14/"}},[s._v("Online Demo")])]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-meta"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("html")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("head")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("meta")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("charset")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import CSS --\x3e")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("link")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("rel")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"stylesheet"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/theme-chalk/index.css"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("body")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"app"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"visible = true"')]),s._v(">")]),s._v("Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"visible"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Hello world"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Try Element"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import Vue before Element --\x3e")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),t("span",{attrs:{class:"undefined"}}),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import JavaScript --\x3e")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),t("span",{attrs:{class:"undefined"}}),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"actionscript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n el: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n data: "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" { visible: "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(" }\n }\n })\n ")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),t("p",[s._v("Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: Quick Start")])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1386)},function(s,a,t){"use strict";function l(s){t(1387)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1389),n=t(0),r=l,v=n(null,e.a,!1,r,null,null);a.default=v.exports},function(s,a,t){var l=t(1388);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("7aed4de5",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-layout .el-row{margin-bottom:20px}.demo-layout .el-row:last-child{margin-bottom:0}.demo-layout .el-col{border-radius:4px}.demo-layout .bg-purple-dark{background:#99a9bf}.demo-layout .bg-purple{background:#d3dce6}.demo-layout .bg-purple-light{background:#e5e9f2}.demo-layout .grid-content{border-radius:4px;min-height:36px}.demo-layout .row-bg{padding:10px 0;background-color:#f9fafc}",""])},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Rápido y facilmente crea un layout básico con 24 columnas.")]),s._m(1),t("p",[s._v("Crea un layout básico usando columnas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n    \n\n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",[t("el-col",{attrs:{span:24}},[t("div",{staticClass:"grid-content bg-purple-dark"})])],1),t("el-row",[t("el-col",{attrs:{span:12}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:12}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1),t("el-row",[t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1),t("el-row",[t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),t("p",[s._v("Con "),t("code",[s._v("row")]),s._v(" y "),t("code",[s._v("col")]),s._v(", puede facilmente manipular el layout usando el atributo "),t("code",[s._v("span")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"24"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("El espaciado de columnas está soportado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("p",[s._v("Row provee el atributo "),t("code",[s._v("gutter")]),s._v(" para especificar el espacio entre columnas y su valor por defecto es 0.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Crea un complejo layout híbrido combinando el básico de 1/24 columnas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:16}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:16}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puedes especificar offsets para las columnas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n    \n\n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("p",[s._v("Puedes especificar el offset para una columna mediante el atributo "),t("code",[s._v("offset")]),s._v(" de Col.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Usa flex layout para un alineamiento flexible de columnas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("p",[s._v("Puede habilitar flex layout asignando el atributo "),t("code",[s._v("type")]),s._v(" a 'flex', y definir el layout de elementos hijos asignando el atributo "),t("code",[s._v("justify")]),s._v(" con los valores start, center, end, space-between o space-around.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"center"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"end"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"space-between"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"space-around"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-col")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-dark")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-light")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#e5e9f2")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".grid-content")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("min-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("36px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases:")]),s._m(8),t("p",[s._v("Las clases son:")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"layout-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"espaciado-de-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#espaciado-de-columnas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Espaciado de columnas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"layout-hibrido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-hibrido","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout híbrido")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"offset-de-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#offset-de-columnas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Offset de columnas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"alineacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alineacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alineación")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"responsive-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Responsive Layout")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"clases-utiles-para-ocultar-elementos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clases-utiles-para-ocultar-elementos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Clases útiles para ocultar elementos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-chalk/display.css'")]),s._v(";\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("code",{pre:!0},[s._v("hidden-xs-only")]),s._v(" - oculto en viewports extra pequeños solamente")]),t("li",[t("code",{pre:!0},[s._v("hidden-sm-only")]),s._v(" - oculto en viewports pequeños solamente")]),t("li",[t("code",{pre:!0},[s._v("hidden-sm-and-down")]),s._v(" - oculto en viewports pequeños y menores")]),t("li",[t("code",{pre:!0},[s._v("hidden-sm-and-up")]),s._v(" - oculto en viewports pequeños y superiores")]),t("li",[t("code",{pre:!0},[s._v("hidden-md-only")]),s._v(" - oculto en viewports medios solamente")]),t("li",[t("code",{pre:!0},[s._v("hidden-md-and-down")]),s._v(" - oculto en viewports medios y menores")]),t("li",[t("code",{pre:!0},[s._v("hidden-md-and-up")]),s._v(" - oculto en viewports medios y mayores")]),t("li",[t("code",{pre:!0},[s._v("hidden-lg-only")]),s._v(" - ocultos en viewports grandes solamente")]),t("li",[t("code",{pre:!0},[s._v("hidden-lg-and-down")]),s._v(" - ocultos en viewports grandes y menores")]),t("li",[t("code",{pre:!0},[s._v("hidden-lg-and-up")]),s._v(" - ocultos en viewports grandes y superiores")]),t("li",[t("code",{pre:!0},[s._v("hidden-xl-only")]),s._v(" - oculto en viewports extra grandes solamente")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos Row")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributos")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Valor por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("gutter")]),t("td",[s._v("espaciado de la grilla")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("modo del layout , puedes usar flex, funciona en navegadores modernos")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("justify")]),t("td",[s._v("alineación horizontal del layout flex")]),t("td",[s._v("string")]),t("td",[s._v("start/end/center/space-around/space-between")]),t("td",[s._v("start")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alineación vertical del layout flex")]),t("td",[s._v("string")]),t("td",[s._v("top/middle/bottom")]),t("td",[s._v("top")])]),t("tr",[t("td",[s._v("tag")]),t("td",[s._v("tag de elemento propio")]),t("td",[s._v("string")]),t("td",[s._v("*")]),t("td",[s._v("div")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-col"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-col","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos Col")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributos")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Valor por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("span")]),t("td",[s._v("número de columnas que abarca la cuadrícula")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("24")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("especific espacio en el lado izquierdo de la grill")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("push")]),t("td",[s._v("número de columnas que la grilla se mueve hacia la derecha")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("pull")]),t("td",[s._v("número de columnas que la grilla se mueve hacia la izquierda")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("xs")]),t("td",[t("code",{pre:!0},[s._v("<768px")]),s._v(" Columnas responsive u objeto con propiedades de la columna")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("sm")]),t("td",[t("code",{pre:!0},[s._v("≥768px")]),s._v(" Columnas responsive u objeto con propiedades de la columna")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("md")]),t("td",[t("code",{pre:!0},[s._v("≥992px")]),s._v(" Columnas responsive u objeto con propiedades de la columna")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("lg")]),t("td",[t("code",{pre:!0},[s._v("≥1200px")]),s._v(" Columnas responsive u objeto con propiedades de la columna")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("xl")]),t("td",[t("code",{pre:!0},[s._v("≥1920px")]),s._v(" Columnas responsive u objeto con propiedades de la columna")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("tag")]),t("td",[s._v("tag de elemento propio")]),t("td",[s._v("string")]),t("td",[s._v("*")]),t("td",[s._v("div")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1391)},function(s,a,t){"use strict";function l(s){t(1392)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1394),n=t.n(e),r=t(1395),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1393);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("e717b954",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-loading .el-table{border:none}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var s=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){s.close()},2e3)}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Se muestra la animación mientras se cargan los datos.")]),s._m(1),t("p",[s._v("Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading: true\n };\n }\n };\n",style:"\n body {\n margin: 0;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada "),t("code",[s._v("v-loading")]),s._v(", solo necesitas enlazarlo a un valor "),t("code",[s._v("Boolean")]),s._v(". Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador "),t("code",[s._v("body")]),s._v(", la máscara se agrega al elemento body.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loading")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Puede personalizar el texto de carga, spinner de carga y color de fondo.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading2: true\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Agrege el atributo "),t("code",[s._v("element-loading-text")]),s._v(" al elemento en el que "),t("code",[s._v("v-loading")]),s._v(" está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, "),t("code",[s._v("element-loading-spinner")]),s._v(" y "),t("code",[s._v("element-loading-background")]),s._v(" son para personalizar el nombre de la clase del spinner y el color de fondo.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"loading2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("element-loading-text")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Loading..."')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("element-loading-spinner")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-loading"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("element-loading-background")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"rgba(0, 0, 0, 0.8)"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loading2")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Muestra una animación de pantalla completa mientras se cargan los datos")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n fullscreenLoading: false\n }\n },\n methods: {\n openFullScreen() {\n this.fullscreenLoading = true;\n setTimeout(() => {\n this.fullscreenLoading = false;\n }, 2000);\n },\n openFullScreen2() {\n const loading = this.$loading({\n lock: true,\n text: 'Loading',\n spinner: 'el-icon-loading',\n background: 'rgba(0, 0, 0, 0.7)'\n });\n setTimeout(() => {\n loading.close();\n }, 2000);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:s.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:s.openFullScreen}},[s._v("\n Como directiva\n ")]),t("el-button",{attrs:{type:"primary"},on:{click:s.openFullScreen2}},[s._v("\n Como servicio\n ")])]],2),t("p",[s._v("Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador "),t("code",[s._v("fullscreen")]),s._v(", y este puede ser agregado al "),t("code",[s._v("body")]),s._v(". En este caso, si desea deshabilitar el desplazamiento en "),t("code",[s._v("body")]),s._v(", puede agregar otro modificador "),t("code",[s._v("lock")]),s._v(". Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"openFullScreen"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading.fullscreen.lock")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n Como directiva\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"openFullScreen2"')]),s._v(">")]),s._v("\n Como servicio\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreenLoading")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openFullScreen() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fullscreenLoading = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fullscreenLoading = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(");\n },\n openFullScreen2() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" loading = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$loading({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("lock")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("spinner")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'el-icon-loading'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("background")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'rgba(0, 0, 0, 0.7)'")]),s._v("\n });\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n loading.close();\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(");\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puede invocar el componente con un servicio. Importe el servicio:")]),s._m(5),t("p",[s._v("Invocar:")]),s._m(6),s._m(7),s._m(8),t("p",[s._v("Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"cargando"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cargando")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"cargando-dentro-de-un-contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando-dentro-de-un-contenedor","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cargando dentro de un contenedor")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"personalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Personalización")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"cargando-a-pantalla-completa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando-a-pantalla-completa","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cargando a pantalla completa")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"servicio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#servicio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Servicio")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Loading } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[s._v("Loading.service(options);\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("El parámetro "),t("code",{pre:!0},[s._v("options")]),s._v(" es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. "),t("code",{pre:!0},[s._v("LoadingService")]),s._v(" devuelve una instancia del componente, y puede cerrarlo invocando el método "),t("code",{pre:!0},[s._v("close")]),s._v(":")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// true")]),s._v("\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Llamar al método "),t("code",{pre:!0},[s._v("close")]),s._v(" en cualquiera de estas puede cerrarlo.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Si Element es importado completamente, un método global "),t("code",{pre:!0},[s._v("$loading")]),s._v(" puede ser registrado a Vue.prototype. Puede invocarlo como esto: "),t("code",{pre:!0},[s._v("this.$loading(options)")]),s._v(", y también devuelve una instancia del componente.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("target")]),t("td",[s._v("el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a "),t("code",{pre:!0},[s._v("document.querySelector")]),s._v(" para obtener el correspondiente nodo del DOM")]),t("td",[s._v("object/string")]),t("td",[s._v("—")]),t("td",[s._v("document.body")])]),t("tr",[t("td",[s._v("body")]),t("td",[s._v("igual que el modificador "),t("code",{pre:!0},[s._v("body")]),s._v(" de "),t("code",{pre:!0},[s._v("v-loading")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("fullscreen")]),t("td",[s._v("igual que el modificador "),t("code",{pre:!0},[s._v("fullscreen")]),s._v(" de "),t("code",{pre:!0},[s._v("v-loading")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("lock")]),t("td",[s._v("igual que el modificador "),t("code",{pre:!0},[s._v("lock")]),s._v(" de "),t("code",{pre:!0},[s._v("v-loading")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("text")]),t("td",[s._v("texto de cargando que se muestra debajo del spinner")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("spinner")]),t("td",[s._v("nombre de clase del spinner personalizado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("background")]),t("td",[s._v("color de fondo de la máscara")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("nombre de clase personalizada para el componente")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1397)},function(s,a,t){"use strict";function l(s){t(1398)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1400),n=t.n(e),r=t(1401),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1399);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("0bea456a",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-box.demo-menu .el-menu-demo{padding-left:55px}.demo-box.demo-menu .el-menu-vertical-demo:not(.el-menu--collapse){width:240px;min-height:400px}.demo-box.demo-menu .line{height:1px;background-color:#e0e6ed;margin:35px -24px}.demo-box.demo-menu h5{font-size:14px;color:#8492a6;margin-top:10px}.demo-box.demo-menu .tac{text-align:center}.demo-box.demo-menu .tac .el-menu-vertical-demo{display:inline-block;text-align:left}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{activeIndex:"1",activeIndex2:"1",isCollapse:!0}},methods:{handleOpen:function(s,a){console.log(s,a)},handleClose:function(s,a){console.log(s,a)},handleSelect:function(s,a){console.log(s,a)}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Menú que provee la navegación para tu sitio.")]),s._m(1),t("p",[s._v("Top bar NavMenu puede ser usado en distinto escenarios.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Processing Center\n \n \n item one\n item two\n item three\n \n \n item one\n item two\n item three\n \n \n Info\n Orders\n\n
    \n\n Processing Center\n \n \n item one\n item two\n item three\n \n \n item one\n item two\n item three\n \n \n Info\n Orders\n\n\n\n',script:"\n export default {\n data() {\n return {\n activeIndex: '1',\n activeIndex2: '1'\n };\n },\n methods: {\n handleSelect(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[t("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),t("el-submenu",{attrs:{index:"2"}},[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("Workspace")]),t("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),t("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")]),t("el-submenu",{attrs:{index:"2-4"}},[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),t("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"2-4-2"}},[s._v("item two")]),t("el-menu-item",{attrs:{index:"2-4-3"}},[s._v("item three")])],2)],2),t("el-menu-item",{attrs:{index:"3",disabled:""}},[s._v("Info")]),t("el-menu-item",{attrs:{index:"4"}},[t("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1),t("div",{staticClass:"line"}),t("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:s.handleSelect}},[t("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),t("el-submenu",{attrs:{index:"2"}},[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("Workspace")]),t("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),t("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")]),t("el-submenu",{attrs:{index:"2-4"}},[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),t("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"2-4-2"}},[s._v("item two")]),t("el-menu-item",{attrs:{index:"2-4-3"}},[s._v("item three")])],2)],2),t("el-menu-item",{attrs:{index:"3",disabled:""}},[s._v("Info")]),t("el-menu-item",{attrs:{index:"4"}},[t("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1)],1),t("p",[s._v("Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad "),t("code",[s._v("mode")]),s._v(" el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee "),t("code",[s._v("background-color")]),s._v(", "),t("code",[s._v("text-color")]),s._v(" y "),t("code",[s._v("active-text-color")]),s._v(" para customizar los colores.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":default-active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"activeIndex"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-demo"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("mode")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-2"')]),s._v(">")]),s._v("item two"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-3"')]),s._v(">")]),s._v("item three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://www.ele.me"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("target")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":default-active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"activeIndex2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-demo"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("mode")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("background-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#545c64"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#fff"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("active-text-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-2"')]),s._v(">")]),s._v("item two"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-3"')]),s._v(">")]),s._v("item three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://www.ele.me"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("target")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("activeIndex")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("activeIndex2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleSelect(key, keyPath) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("NavMenu vertical con sub-menús.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Default colors
    \n \n \n \n \n item one\n item one\n \n \n item three\n \n \n \n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n \n \n Navigator Four\n \n \n     \n \n
    Custom colors
    \n \n \n \n \n item one\n item one\n \n \n item three\n \n \n \n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n \n \n Navigator Four\n \n \n     \n    \n\n\n',script:"\n export default {\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{staticClass:"tac"},[t("el-col",{attrs:{span:12}},[t("h5",[s._v("Default colors")]),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{attrs:{slot:"title"},slot:"title"},[t("i",{staticClass:"el-icon-location"}),t("span",[s._v("Navigator One")])]),t("el-menu-item-group",{attrs:{title:"Group One"}},[t("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),t("el-menu-item-group",{attrs:{title:"Group Two"}},[t("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),t("el-submenu",{attrs:{index:"1-4"}},[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),t("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),t("el-menu-item",{attrs:{index:"2"}},[t("i",{staticClass:"el-icon-menu"}),t("span",[s._v("Navigator Two")])]),t("el-menu-item",{attrs:{index:"3",disabled:""}},[t("i",{staticClass:"el-icon-document"}),t("span",[s._v("Navigator Three")])]),t("el-menu-item",{attrs:{index:"4"}},[t("i",{staticClass:"el-icon-setting"}),t("span",[s._v("Navigator Four")])])],1)],1),t("el-col",{attrs:{span:12}},[t("h5",[s._v("Custom colors")]),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:s.handleOpen,close:s.handleClose}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{attrs:{slot:"title"},slot:"title"},[t("i",{staticClass:"el-icon-location"}),t("span",[s._v("Navigator One")])]),t("el-menu-item-group",{attrs:{title:"Group One"}},[t("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),t("el-menu-item-group",{attrs:{title:"Group Two"}},[t("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),t("el-submenu",{attrs:{index:"1-4"}},[t("template",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),t("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),t("el-menu-item",{attrs:{index:"2"}},[t("i",{staticClass:"el-icon-menu"}),t("span",[s._v("Navigator Two")])]),t("el-menu-item",{attrs:{index:"3",disabled:""}},[t("i",{staticClass:"el-icon-document"}),t("span",[s._v("Navigator Three")])]),t("el-menu-item",{attrs:{index:"4"}},[t("i",{staticClass:"el-icon-setting"}),t("span",[s._v("Navigator Four")])])],1)],1)],1)],1),t("p",[s._v("Puede utilizar el componente "),t("code",[s._v("el-menu-item-group")]),s._v(" para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad "),t("code",[s._v("title")]),s._v(" o la propiedad "),t("code",[s._v("slot")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tac"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("Default colors"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator One"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Two"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Four"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("Custom colors"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("background-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#545c64"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#fff"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("active-text-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator One"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Two"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Four"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("NavMenu vertical puede ser colapsado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n expand\n collapse\n\n\n \n \n \n Group One\n item one\n item two\n \n \n item three\n \n \n item four\n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n \n \n Navigator Four\n \n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n isCollapse: true\n };\n },\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:"\n .el-menu-vertical-demo:not(.el-menu--collapse) {\n width: 200px;\n min-height: 400px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:s.isCollapse,callback:function(a){s.isCollapse=a},expression:"isCollapse"}},[t("el-radio-button",{attrs:{label:!1}},[s._v("expand")]),t("el-radio-button",{attrs:{label:!0}},[s._v("collapse")])],1),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:s.isCollapse},on:{open:s.handleOpen,close:s.handleClose}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{attrs:{slot:"title"},slot:"title"},[t("i",{staticClass:"el-icon-location"}),t("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator One")])]),t("el-menu-item-group",[t("span",{attrs:{slot:"title"},slot:"title"},[s._v("Group One")]),t("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),t("el-menu-item-group",{attrs:{title:"Group Two"}},[t("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),t("el-submenu",{attrs:{index:"1-4"}},[t("span",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),t("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],1)],2),t("el-menu-item",{attrs:{index:"2"}},[t("i",{staticClass:"el-icon-menu"}),t("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator Two")])]),t("el-menu-item",{attrs:{index:"3",disabled:""}},[t("i",{staticClass:"el-icon-document"}),t("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator Three")])]),t("el-menu-item",{attrs:{index:"4"}},[t("i",{staticClass:"el-icon-setting"}),t("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator Four")])])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"isCollapse"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("expand"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("collapse"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":collapse")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"isCollapse"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator One"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group One"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item two"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator Two"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator Three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator Four"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-menu-vertical-demo")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":not(.el-menu--collapse)")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("min-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("400px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("isCollapse")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"top-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Top bar")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"side-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Side bar")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos Menu")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("mode")]),t("td",[s._v("modo de presentación del menú")]),t("td",[s._v("string")]),t("td",[s._v("horizontal / vertical")]),t("td",[s._v("vertical")])]),t("tr",[t("td",[s._v("collapse")]),t("td",[s._v("si el menú está colapsado (solo en modo vertical)")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("background-color")]),t("td",[s._v("color de fondo del menú (formato hexadecimal)")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#ffffff")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("color de texto del menú (formato hexadecimal)")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#303133")])]),t("tr",[t("td",[s._v("active-text-color")]),t("td",[s._v("color de text del menu-item activo (formato hexadecimal)")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#409EFF")])]),t("tr",[t("td",[s._v("default-active")]),t("td",[s._v("índice del menu-item activo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("default-openeds")]),t("td",[s._v("arreglo que contiene las llaves del sub-menus activo")]),t("td",[s._v("Array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("unique-opened")]),t("td",[s._v("si solo un submenu puede ser activo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("menu-trigger")]),t("td",[s._v("como dispara eventos sub-menus, solo funciona cuando "),t("code",{pre:!0},[s._v("mode")]),s._v(" es 'horizontal'")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("router")]),t("td",[s._v("si el modo "),t("code",{pre:!0},[s._v("vue-router")]),s._v(" está activado. Si es verdader, índice será usado como 'path' para activar la ruta")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-menu","aria-hidden":"true"}},[s._v("¶")]),s._v(" Métodos Menu")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("open")]),t("td",[s._v("abre un sub-menu específico")]),t("td",[s._v("index: índice del sub-menu para abrir")])]),t("tr",[t("td",[s._v("close")]),t("td",[s._v("cierra un sub-menu específico")]),t("td",[s._v("index: índice del sub-menu para cerrar")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos Menu")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("select")]),t("td",[s._v("callback ejecutado cuando el menú es activado")]),t("td",[s._v("index: índice del menú activado, indexPath: index path del menú activado")])]),t("tr",[t("td",[s._v("open")]),t("td",[s._v("callback ejecutado cuando sub-menu se expande")]),t("td",[s._v("index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido")])]),t("tr",[t("td",[s._v("close")]),t("td",[s._v("callback ejecutado cuando sub-menu colapsa")]),t("td",[s._v("index: índice del sub-menu colapsado, indexPath: index path del menú colapsado")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos-menu-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu-item","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos Menu-Item")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("click")]),t("td",[s._v("callback ejecutado cuando se hace click sobre menu-item")]),t("td",[s._v("el: instancia de menu-item")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-submenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-submenu","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos SubMenu")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("index")]),t("td",[s._v("identificador único")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre personalizado de la clase del menu popup")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-timeout")]),t("td",[s._v("tiempo de espera antes de mostrar un submenú")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])]),t("tr",[t("td",[s._v("hide-timeout")]),t("td",[s._v("tiempo de espera antes de ocultar un submenú")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si esta "),t("code",{pre:!0},[s._v("disabled")]),s._v(" el sub-menu")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-menu-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-item","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos Menu-Item")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("index")]),t("td",[s._v("identificador único")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("route")]),t("td",[s._v("Objeto Vue Router")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si esta "),t("code",{pre:!0},[s._v("disabled")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-menu-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos Menu-Group")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("título del grupo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1403)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1404),e=t.n(l),n=t(1405),r=t(0),v=r(e.a,n.a,!1,null,null,null);a.default=v.exports},function(s,a,t){"use strict";a.__esModule=!0,a.default={methods:{open:function(){var s=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(a){s.$message({type:"info",message:"action: "+a})}})},open2:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"Delete completed",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"Delete canceled",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("Please input your email","Tips",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(a){var t=a.value;setTimeout(function(){s.$message({type:"success",message:"Your email is:"+t})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"Input canceled"})},200)})},open4:function(){var s=this,a=this.$createElement;this.$msgbox({title:"Message",message:a("p",null,[a("span",null,"Message can be "),a("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(s,a,t){"confirm"===s?(a.confirmButtonLoading=!0,a.confirmButtonText="Loading...",setTimeout(function(){t(),setTimeout(function(){a.confirmButtonLoading=!1},300)},3e3)):t()}}).then(function(a){setTimeout(function(){s.$message({type:"info",message:"action: "+a})},200)})},open5:function(){this.$alert("This is HTML string","HTML String",{dangerouslyUseHTMLString:!0})},open6:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){s.$message({type:"success",message:"Delete completed"})}).catch(function(){s.$message({type:"info",message:"Delete canceled"})})}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y mostrar mensajes de aviso.")]),s._m(1),s._m(2),t("p",[s._v("Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$alert('This is a message', 'Title', {\n confirmButtonText: 'OK',\n callback: action => {\n this.$message({\n type: 'info',\n message: `action: ${ action }`\n });\n }\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("Click to open the Message Box")])]],2),t("p",[s._v("Desplegar una alerta utilizando el metodo "),t("code",[s._v("$alert")]),s._v(". Simula el sistema "),t("code",[s._v("alert")]),s._v(", y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos "),t("code",[s._v("message")]),s._v(" y "),t("code",[s._v("title")]),s._v(". Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto "),t("code",[s._v("Promise")]),s._v(" para su procesamiento posteriormente. Si no estas seguro si el navegador soporta "),t("code",[s._v("Promise")]),s._v(", deberias importar una libreria de terceros de polyfill o utilizar callbacks.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("Click to open the Message Box"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$alert("),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Title'")]),s._v(", {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("callback")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("`action: "),t("span",{attrs:{class:"hljs-subst"}},[s._v("${ action }")]),s._v("`")]),s._v("\n });\n }\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Confirm es utilizado para preguntar al usuario y recibir una confirmacion.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open2() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning'\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n }); \n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("Click to open the Message Box")])]],2),t("p",[s._v("Llamando al metodo "),t("code",[s._v("$confirm")]),s._v(" para abrir el componente confirm, y simula el sistema "),t("code",[s._v("confirm")]),s._v(". Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado "),t("code",[s._v("options")]),s._v(" que es literalmente un objeto. El atributo "),t("code",[s._v("type")]),s._v(" indica el tipo de mensaje, y su valor puede ser "),t("code",[s._v("success")]),s._v(", "),t("code",[s._v("error")]),s._v(", "),t("code",[s._v("info")]),s._v(" y "),t("code",[s._v("warning")]),s._v(". Se debe tener en cuenta que el segundo atributo "),t("code",[s._v("title")]),s._v(" debe ser de tipo "),t("code",[s._v("string")]),s._v(", y si es de tipo "),t("code",[s._v("object")]),s._v(", sera manejado como el atributo "),t("code",[s._v("options")]),s._v(". Aqui utilizamos "),t("code",[s._v("Promise")]),s._v(" para manejar posteriormente el proceso.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("Click to open the Message Box"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open2() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),t("span",{attrs:{class:"hljs-string"}},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(", {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n }).then("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Delete completed'")]),s._v("\n });\n }).catch("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Delete canceled'")]),s._v("\n }); \n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Prompt es utilizado cuando se requiere entrada de informacion del usuario.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$prompt('Please input your e-mail', 'Tip', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n inputErrorMessage: 'Invalid Email'\n }).then(value => {\n this.$message({\n type: 'success',\n message: 'Your email is:' + value\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Input canceled'\n }); \n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("Click to open Message Box")])]],2),t("p",[s._v("Llamando al metodo "),t("code",[s._v("$prompt")]),s._v(" desplegamos el componente prompt, y simula el sistema "),t("code",[s._v("prompt")]),s._v(".Puedes utilizar el parametro "),t("code",[s._v("inputPattern")]),s._v(" para especificar tu propio patron RegExp. Utiliza el parametro "),t("code",[s._v("inputValidator")]),s._v(" para especificar el metodo de validacion, y debería regresar un valor de tipo "),t("code",[s._v("Boolean")]),s._v(" o "),t("code",[s._v("String")]),s._v(". Al regresar "),t("code",[s._v("false")]),s._v(" o "),t("code",[s._v("String")]),s._v(" significa que la validacion a fallado, y la cadena regresada se usara como "),t("code",[s._v("inputErrorMessage")]),s._v(". Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro "),t("code",[s._v("inputPlaceholder")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("Click to open Message Box"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open3() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$prompt("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please input your e-mail'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tip'")]),s._v(", {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inputPattern")]),s._v(": "),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inputErrorMessage")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Invalid Email'")]),s._v("\n }).then("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("value")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Your email is:'")]),s._v(" + value\n });\n }).catch("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Input canceled'")]),s._v("\n }); \n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Puede ser personalizado para mostrar diversos contenidos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open4() {\n const h = this.$createElement;\n this.$msgbox({\n title: 'Message',\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ]),\n showCancelButton: true,\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n beforeClose: (action, instance, done) => {\n if (action === 'confirm') {\n instance.confirmButtonLoading = true;\n instance.confirmButtonText = 'Loading...';\n setTimeout(() => {\n done();\n setTimeout(() => {\n instance.confirmButtonLoading = false;\n }, 300);\n }, 3000);\n } else {\n done();\n }\n }\n }).then(action => {\n this.$message({\n type: 'info',\n message: 'action: ' + action\n });\n });\n },\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),t("p",[s._v("Los tres metodos mencionados anteriormente son un rempaquetado del metodo "),t("code",[s._v("$msgbox")]),s._v(". En este ejemplo se realiza una llamada al metodo "),t("code",[s._v("$msgbox")]),s._v(" directamente utilizando el atributo "),t("code",[s._v("showCancelButton")]),s._v(", el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo "),t("code",[s._v("cancelButtonClass")]),s._v(" para agregar un estilo personalizado y el atributo "),t("code",[s._v("cancelButtonText")]),s._v(" para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo "),t("code",[s._v("beforeClose")]),s._v(". Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: "),t("code",[s._v("action")]),s._v(", "),t("code",[s._v("instance")]),s._v(" y "),t("code",[s._v("done")]),s._v(". Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando "),t("code",[s._v("loading")]),s._v(" para el boton de confirmacion; puede invocar el metodo "),t("code",[s._v("done")]),s._v(" para cerrar la instancia del componente MessageBox (si el metodo "),t("code",[s._v("done")]),s._v(" no es llamado dentro del atributo "),t("code",[s._v("beforeClose")]),s._v(", la instancia no podra cerrarse).")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open4() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$msgbox({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message can be '")]),s._v("),\n h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),t("span",{attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n ]),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("showCancelButton")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("beforeClose")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),t("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(") {\n instance.confirmButtonLoading = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n instance.confirmButtonText = "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Loading...'")]),s._v(";\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n done();\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n instance.confirmButtonLoading = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("300")]),s._v(");\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(");\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n done();\n }\n }\n }).then("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'action: '")]),s._v(" + action\n });\n });\n },\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$alert('This is HTML string', 'HTML String', {\n dangerouslyUseHTMLString: true\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open5}},[s._v("Click to open Message Box")])]],2),t("p",[s._v("Establezca el valor de "),t("code",[s._v("dangerouslyUseHTMLString")]),s._v(" a true y "),t("code",[s._v("message")]),s._v(" sera tratado como una cadena HTML.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("Click to open Message Box"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open5() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$alert("),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is HTML string'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'HTML String'")]),s._v(", {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),t("p",[s._v("El contenido del componente MessageBox puede ser centrado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open6() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning',\n center: true\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n });\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open6}},[s._v("Click to open Message Box")])]],2),t("p",[s._v("Establecer "),t("code",[s._v("center")]),s._v(" a "),t("code",[s._v("true")]),s._v(" centrara el contenido")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("Click to open Message Box"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open6() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),t("span",{attrs:{class:"hljs-string"}},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(", {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }).then("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Delete completed'")]),s._v("\n });\n }).catch("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Delete canceled'")]),s._v("\n });\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("Por diseño los message box nos proveen de simulaciones de sistemas como los componentes "),t("code",{pre:!0},[s._v("alert")]),s._v(", "),t("code",{pre:!0},[s._v("confirm")]),s._v(" y "),t("code",{pre:!0},[s._v("prompt")]),s._v("，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[s._v("¶")]),s._v(" Confirm")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prompt")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"personalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Personalización")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"utiliza-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[s._v("¶")]),s._v(" Utiliza cadenas HTML")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("message")]),s._v(" soporta cadenas HTML.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"warning"},[t("p",[s._v("Aunque la propiedad "),t("code",{pre:!0},[s._v("message")]),s._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),t("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". Entonces cuando "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" esta activada, asegurece que el contendio de "),t("code",{pre:!0},[s._v("message")]),s._v(" sea de confianza, y "),t("strong",[s._v("nunca")]),s._v(" asignar "),t("code",{pre:!0},[s._v("message")]),s._v(" a contenido generado por el usuario.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered content")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos-globales"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[s._v("¶")]),s._v(" Metodos Globales")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: "),t("code",{pre:!0},[s._v("$msgbox")]),s._v(", "),t("code",{pre:!0},[s._v("$alert")]),s._v(", "),t("code",{pre:!0},[s._v("$confirm")]),s._v(" y "),t("code",{pre:!0},[s._v("$prompt")]),s._v(". Asi que en una instancia de Vue puedes llamar el metodo "),t("code",{pre:!0},[s._v("MessageBox")]),s._v(" como lo que hicimos en esta pagina. Los parametros son:")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("code",{pre:!0},[s._v("$msgbox(options)")])]),t("li",[t("code",{pre:!0},[s._v("$alert(message, title, options)")]),s._v(" or "),t("code",{pre:!0},[s._v("$alert(message, options)")])]),t("li",[t("code",{pre:!0},[s._v("$confirm(message, title, options)")]),s._v(" or "),t("code",{pre:!0},[s._v("$confirm(message, options)")])]),t("li",[t("code",{pre:!0},[s._v("$prompt(message, title, options)")]),s._v(" or "),t("code",{pre:!0},[s._v("$prompt(message, options)")])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"importacion-local"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[s._v("¶")]),s._v(" Importación local")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Si prefieres importar "),t("code",{pre:!0},[s._v("MessageBox")]),s._v(" cuando lo necesites (on demand):")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { MessageBox } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Los metodos correspondientes: "),t("code",{pre:!0},[s._v("MessageBox")]),s._v(", "),t("code",{pre:!0},[s._v("MessageBox.alert")]),s._v(", "),t("code",{pre:!0},[s._v("MessageBox.confirm")]),s._v(" y "),t("code",{pre:!0},[s._v("MessageBox.prompt")]),s._v(". Los parametros son los mismos que los anteriores.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[s._v("¶")]),s._v(" Opciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores Permitidos")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("titulo del componente MessageBox")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("message")]),t("td",[s._v("contenido del componente MessageBox")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("dangerouslyUseHTMLString")]),t("td",[s._v("utilizado para que "),t("code",{pre:!0},[s._v("message")]),s._v(" sea tratado como una cadena HTML")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de mensaje , utilizado para mostrar el icono")]),t("td",[s._v("string")]),t("td",[s._v("success / info / warning / error")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("nombre de la clase personzalida para el componente MessageBox")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("callback")]),t("td",[s._v("MessageBox callback al cerrar si no desea utilizar Promise")]),t("td",[s._v("function(action), donde la accion puede ser 'confirm' o 'cancel', e "),t("code",{pre:!0},[s._v("instance")]),s._v(" es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("beforeClose")]),t("td",[s._v("callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre")]),t("td",[s._v("function(action, instance, done), donde "),t("code",{pre:!0},[s._v("action")]),s._v(" pueden ser 'confirm' o 'cancel'; "),t("code",{pre:!0},[s._v("instance")]),s._v(" es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; "),t("code",{pre:!0},[s._v("done")]),s._v(" es para cerrar la instancia")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("lockScroll")]),t("td",[s._v("utilizado para bloquear el desplazamiento del contenido del MessageBox prompts")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("showCancelButton")]),t("td",[s._v("utlizado para mostrar un boton cancelar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false (true cuando es llamado con confirm y prompt)")])]),t("tr",[t("td",[s._v("showConfirmButton")]),t("td",[s._v("utlizado para mostrar un boton confirmar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("cancelButtonText")]),t("td",[s._v("contenido de texto del boton cancelar")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Cancel")])]),t("tr",[t("td",[s._v("confirmButtonText")]),t("td",[s._v("contenido de texto del boton confirmar")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("OK")])]),t("tr",[t("td",[s._v("cancelButtonClass")]),t("td",[s._v("nombre de la clase personalizada del boton cancelar")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("confirmButtonClass")]),t("td",[s._v("nombre de la clase personalizada del boton confirmar")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closeOnClickModal")]),t("td",[s._v("utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true (false cuando es llamado con alert)")])]),t("tr",[t("td",[s._v("closeOnPressEscape")]),t("td",[s._v("utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true (false cuando es llamado con alert)")])]),t("tr",[t("td",[s._v("closeOnHashChange")]),t("td",[s._v("utilizado para cerra el componente MessageBox cuando hash cambie")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("showInput")]),t("td",[s._v("utilizado para mostrar el componente input")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false (true cuando es llamado con prompt)")])]),t("tr",[t("td",[s._v("inputPlaceholder")]),t("td",[s._v("placeholder para el componente input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputType")]),t("td",[s._v("tipo del componente input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("text")])]),t("tr",[t("td",[s._v("inputValue")]),t("td",[s._v("valor inicial del componente input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputPattern")]),t("td",[s._v("regexp del componente input")]),t("td",[s._v("regexp")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputValidator")]),t("td",[s._v("funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputErrorMessage")]),t("td",[s._v("mensaje de error cuando la validacion falla")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Illegal input")])]),t("tr",[t("td",[s._v("center")]),t("td",[s._v("utilizado para alinear el contenido al centro")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("roundButton")]),t("td",[s._v("utilizado para redondear el boton")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1407)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1408),e=t.n(l),n=t(1409),r=t(0),v=r(e.a,n.a,!1,null,null,null);a.default=v.exports},function(s,a,t){"use strict";s.exports={methods:{open:function(){this.$message("This is a message.")},openVn:function(){var s=this.$createElement;this.$message({message:s("p",null,[s("span",null,"Message can be "),s("i",{style:"color: teal"},"VNode")])})},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")},open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})},openCenter:function(){this.$message({message:"Centered text",center:!0})},openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"This is HTML string"})}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.")]),s._m(1),t("p",[s._v("Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('This is a message.');\n },\n \n openVn() {\n const h = this.$createElement;\n this.$message({\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ])\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("Show message")]),t("el-button",{attrs:{plain:!0},on:{click:s.openVn}},[s._v("VNode")])]],2),t("p",[s._v("La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo "),t("code",[s._v("$message")]),s._v(" para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("Show message"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"openVn"')]),s._v(">")]),s._v("VNode"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v(");\n },\n \n openVn() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message can be '")]),s._v("),\n h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),t("span",{attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n ])\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('This is a message.');\n },\n open2() {\n this.$message({\n message: 'Congrats, this is a success message.',\n type: 'success'\n });\n },\n\n open3() {\n this.$message({\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open4() {\n this.$message.error('Oops, this is a error message.');\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("success")]),t("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("warning")]),t("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("message")]),t("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("error")])]],2),t("p",[s._v("Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de "),t("code",[s._v("type")]),s._v(" puede definir diferentes tipos, el predeterminado es "),t("code",[s._v("info")]),s._v(". En tales casos el cuerpo principal se pasa como el valor de "),t("code",[s._v("message")]),s._v(". Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como "),t("code",[s._v("open4")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("success"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("warning"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("message"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("error"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v(");\n },\n open2() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open3() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open4() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Oops, this is a error message.'")]),s._v(");\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Un boton para cerrar que puede ser agregado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$message({\n showClose: true,\n message: 'This is a message.'\n });\n },\n\n open6() {\n this.$message({\n showClose: true,\n message: 'Congrats, this is a success message.',\n type: 'success'\n });\n },\n\n open7() {\n this.$message({\n showClose: true,\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open8() {\n this.$message({\n showClose: true,\n message: 'Oops, this is a error message.',\n type: 'error'\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("message")]),t("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("success")]),t("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("warning")]),t("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("error")])]],2),t("p",[s._v("Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo "),t("code",[s._v("showClose")]),s._v(". Ademas, al igual que las notificaciones, message tiene un atriubuto "),t("code",[s._v("duration")]),s._v(" que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a "),t("code",[s._v("0")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("message"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("success"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("warning"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open8"')]),s._v(">")]),s._v("error"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open5() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v("\n });\n },\n\n open6() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open7() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open8() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Oops, this is a error message.'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'error'")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n openCenter() {\n this.$message({\n message: 'Centered text',\n center: true\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.openCenter}},[s._v("Centered text")])]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"openCenter"')]),s._v(">")]),s._v("Centered text"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openCenter() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Centered text'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n openHTML() {\n this.$message({\n dangerouslyUseHTMLString: true,\n message: 'This is HTML string'\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.openHTML}},[s._v("Use HTML String")])]],2),t("p",[s._v("Establece la propiedad "),t("code",[s._v("dangerouslyUseHTMLString")]),s._v(" en true y "),t("code",[s._v("message")]),s._v(" sera tratado como una cadena HTML.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"openHTML"')]),s._v(">")]),s._v("Use HTML String"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openHTML() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is HTML string'")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso basico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tipos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tipos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"closable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Closable")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered text")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Utiliza el atributo "),t("code",{pre:!0},[s._v("center")]),s._v(" para centrar el texto.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"utiliza-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[s._v("¶")]),s._v(" Utiliza cadenas HTML")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("message")]),s._v(" soporta cadenas HTML.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"warning"},[t("p",[s._v("Aunque la propiedad "),t("code",{pre:!0},[s._v("message")]),s._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),t("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". Entonces cuando "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" esta activada, asegurece que el contendio de "),t("code",{pre:!0},[s._v("message")]),s._v(" sea de confianza, y "),t("strong",[s._v("nunca")]),s._v(" asignar "),t("code",{pre:!0},[s._v("message")]),s._v(" a contenido generado por el usuario.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos-globales"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[s._v("¶")]),s._v(" Metodos Globales")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Element ha agregado un método global llamado "),t("code",{pre:!0},[s._v("$message")]),s._v(" para Vue.prototype. Entonces en una instancia de vue puede llamar a "),t("code",{pre:!0},[s._v("Message")]),s._v(" como lo hicimos en esta pagina.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"importacion-local"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[s._v("¶")]),s._v(" Importación local")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Import "),t("code",{pre:!0},[s._v("Message")]),s._v(":")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Message } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("En este caso deberia llamar al metodo "),t("code",{pre:!0},[s._v("Message(options)")]),s._v(". Tambien se han registrado metodos para los diferentes tipos, e.g. "),t("code",{pre:!0},[s._v("Message.success(options)")]),s._v(". Puede llamar al metodo "),t("code",{pre:!0},[s._v("Message.closeAll()")]),s._v(" para cerrar manualmente todas las instancias.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripcion")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores permitidos")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("message")]),t("td",[s._v("texto del mensaje")]),t("td",[s._v("string / VNode")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo del mensaje")]),t("td",[s._v("string")]),t("td",[s._v("success/warning/info/error")]),t("td",[s._v("info")])]),t("tr",[t("td",[s._v("iconClass")]),t("td",[s._v("clase personalizada para el icono, sobreescribe "),t("code",{pre:!0},[s._v("type")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("dangerouslyUseHTMLString")]),t("td",[s._v("utilizado para que "),t("code",{pre:!0},[s._v("message")]),s._v(" sea tratado como cadena HTML")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("nombre de clase personalizado para el componente Message")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("duration")]),t("td",[s._v("muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("3000")])]),t("tr",[t("td",[s._v("showClose")]),t("td",[s._v("utilizado para mostrar un boton para cerrar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("center")]),t("td",[s._v("utilizado para centrar el texto")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("onClose")]),t("td",[s._v("funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Metodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("Message")]),s._v(" y "),t("code",{pre:!0},[s._v("this.$message")]),s._v(" regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo "),t("code",{pre:!0},[s._v("close")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripcion")])])]),t("tbody",[t("tr",[t("td",[s._v("close")]),t("td",[s._v("cierra el componente Message")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1411)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1412),e=t.n(l),n=t(1413),r=t(0),v=r(e.a,n.a,!1,null,null,null);a.default=v.exports},function(s,a,t){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"Title",message:s("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})},open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})},open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})},open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})},open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"This is HTML string"})},open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})},onClose:function(){console.log("Notification is closed")}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Muestra un mensaje de notificación global en una esquina de la página.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n const h = this.$createElement;\n\n this.$notify({\n title: 'Title',\n message: h('i', { style: 'color: teal' }, 'This is a reminder')\n });\n },\n\n open2() {\n this.$notify({\n title: 'Prompt',\n message: 'This is a message that does not automatically close',\n duration: 0\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n Closes automatically\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n Won't close automatically\n ")])]],2),t("p",[s._v("Element ha registrado el método"),t("code",[s._v("$notify")]),s._v(" y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de "),t("code",[s._v("title")]),s._v(" y el campo de "),t("code",[s._v("message")]),s._v(" para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando "),t("code",[s._v("duration")]),s._v(" se puede controlar su duración. Específicamente, si está configurado en "),t("code",[s._v("0")]),s._v(", no se cerrará automáticamente. Tenga en cuenta que "),t("code",[s._v("duration")]),s._v(" recibe un "),t("code",[s._v("Number")]),s._v(" en milisegundos.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("\n Closes automatically\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("\n Won't close automatically\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Title'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a reminder'")]),s._v(")\n });\n },\n\n open2() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Prompt'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message that does not automatically close'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("duration")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Proporcionamos cuatro tipos: success, warning, info y error.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$notify({\n title: 'Success',\n message: 'This is a success message',\n type: 'success'\n });\n },\n\n open4() {\n this.$notify({\n title: 'Warning',\n message: 'This is a warning message',\n type: 'warning'\n });\n },\n\n open5() {\n this.$notify.info({\n title: 'Info',\n message: 'This is an info message'\n });\n },\n\n open6() {\n this.$notify.error({\n title: 'Error',\n message: 'This is an error message'\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n Success\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n Warning\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n Info\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n Error\n ")])]],2),t("p",[s._v("Element proporciona cuatro tipos de notificación: "),t("code",[s._v("success")]),s._v(", "),t("code",[s._v("warning")]),s._v(", "),t("code",[s._v("info")]),s._v(" y "),t("code",[s._v("error")]),s._v(". Se definen por el campo "),t("code",[s._v("type")]),s._v(" y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo "),t("code",[s._v("open5")]),s._v(" y "),t("code",[s._v("open6")]),s._v(" sin pasar un campo "),t("code",[s._v("type")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("\n Success\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("\n Warning\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("\n Info\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("\n Error\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open3() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Success'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a success message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open4() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a warning message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open5() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.info({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Info'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is an info message'")]),s._v("\n });\n },\n\n open6() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.error({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Error'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is an error message'")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("La notificación puede surgir de cualquier rincón que uno desee.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open7() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top right corner'\n });\n },\n\n open8() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom right corner',\n position: 'bottom-right'\n });\n },\n\n open9() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom left corner',\n position: 'bottom-left'\n });\n },\n\n open10() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top left corner',\n position: 'top-left'\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n Top Right\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open8}},[s._v("\n Bottom Right\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open9}},[s._v("\n Bottom Left\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open10}},[s._v("\n Top Left\n ")])]],2),t("p",[s._v("El atributo "),t("code",[s._v("position")]),s._v(" define desde qué esquina se desliza la notificación. Puede ser "),t("code",[s._v("top-right")]),s._v(", "),t("code",[s._v("top-left")]),s._v(", "),t("code",[s._v("bottom-right")]),s._v(" o "),t("code",[s._v("bottom-left")]),s._v(". Predeterminado: "),t("code",[s._v("top-right")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("\n Top Right\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open8"')]),s._v(">")]),s._v("\n Bottom Right\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open9"')]),s._v(">")]),s._v("\n Bottom Left\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open10"')]),s._v(">")]),s._v("\n Top Left\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open7() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the top right corner'")]),s._v("\n });\n },\n\n open8() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the bottom right corner'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'bottom-right'")]),s._v("\n });\n },\n\n open9() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the bottom left corner'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'bottom-left'")]),s._v("\n });\n },\n\n open10() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the top left corner'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'top-left'")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Personalizar el desplazamiento de notificación desde el borde de la pantalla.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open11() {\n this.$notify.success({\n title: 'Success',\n message: 'This is a success message',\n offset: 100\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open11}},[s._v("\n Notification with offset\n ")])]],2),t("p",[s._v("Configure el atributo "),t("code",[s._v("offset")]),s._v(" para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open11"')]),s._v(">")]),s._v("\n Notification with offset\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open11() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.success({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Success'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a success message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("offset")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("100")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open12() {\n this.$notify({\n title: 'HTML String',\n dangerouslyUseHTMLString: true,\n message: 'This is HTML string'\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open12}},[s._v("\n Use HTML String\n ")])]],2),t("p",[s._v("Configure "),t("code",[s._v("dangerouslyUseHTMLString")]),s._v(" a true y "),t("code",[s._v("message")]),s._v(" se tratará como una cadena HTML.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open12"')]),s._v(">")]),s._v("\n Use HTML String\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open12() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'HTML String'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is HTML string'")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),t("p",[s._v("Es posible ocultar el botón de cerrar")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open13() {\n this.$notify.success({\n title: 'Info',\n message: 'This is a message without close button',\n showClose: false\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open13}},[s._v("\n Hide close button\n ")])]],2),t("p",[s._v("Configure el atributo "),t("code",[s._v("showClose")]),s._v(" como "),t("code",[s._v("false")]),s._v(" para que el usuario no pueda cerrar la notificación.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open13"')]),s._v(">")]),s._v("\n Hide close button\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open13() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.success({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Info'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message without close button'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tipos-de-notificaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-notificaciones","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tipos de notificaciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"posicion-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-personalizada","aria-hidden":"true"}},[s._v("¶")]),s._v(" Posicion personalizada")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"desplazamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desplazamiento","aria-hidden":"true"}},[s._v("¶")]),s._v(" Desplazamiento")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"usando-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usando-cadenas-html","aria-hidden":"true"}},[s._v("¶")]),s._v(" Usando cadenas HTML")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("message")]),s._v(" soporta cadenas HTML.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"warning"},[t("p",[s._v("Aunque la propiedad "),t("code",{pre:!0},[s._v("message")]),s._v(" soporta cadenas HTML, el renderizado dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),t("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("ataques XSS")]),s._v(". Por lo tanto, cuando "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" está a true, por favor asegúrese de que el contenido del mensaje es confiable, y "),t("strong",[s._v("nunca")]),s._v(" asigne "),t("code",{pre:!0},[s._v("message")]),s._v(" al contenido proporcionado por el usuario.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ocultar-boton-de-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ocultar-boton-de-cerrar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Ocultar boton de cerrar")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodo-global"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodo-global","aria-hidden":"true"}},[s._v("¶")]),s._v(" Metodo global")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Element ha añadido un método global "),t("code",{pre:!0},[s._v("$notify")]),s._v(" para Vue.prototype. Así que en una instancia de vue se puede llamar "),t("code",{pre:!0},[s._v("Notification")]),s._v(" como lo hacemos en esta página.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"importar-localmente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importar-localmente","aria-hidden":"true"}},[s._v("¶")]),s._v(" Importar localmente")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Importar "),t("code",{pre:!0},[s._v("Notification")]),s._v(":")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Notification } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("En este caso, debe llamar a "),t("code",{pre:!0},[s._v("Notification(options)")]),s._v(". También se han registrado métodos para diferentes tipos, e.j. "),t("code",{pre:!0},[s._v("Notification.success(options)")]),s._v(". Puede llamar al metodo "),t("code",{pre:!0},[s._v("Notification.closeAll()")]),s._v(" para cerrar manualmente todas las instancias.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[s._v("¶")]),s._v(" Opciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("titulo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("message")]),t("td",[s._v("mensaje")]),t("td",[s._v("string/Vue.VNode")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("dangerouslyUseHTMLString")]),t("td",[s._v("si "),t("code",{pre:!0},[s._v("message")]),s._v(" es tratado como una cadena HTML")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de notificacion")]),t("td",[s._v("string")]),t("td",[s._v("success/warning/info/error")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("iconClass")]),t("td",[s._v("clase personalizada de icono. Será anulado por "),t("code",{pre:!0},[s._v("type")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("nombre de clase personalizado para la notificacion")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("duration")]),t("td",[s._v("duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("4500")])]),t("tr",[t("td",[s._v("position")]),t("td",[s._v("posicion personalizada")]),t("td",[s._v("string")]),t("td",[s._v("top-right/top-left/bottom-right/bottom-left")]),t("td",[s._v("top-right")])]),t("tr",[t("td",[s._v("showClose")]),t("td",[s._v("si se muestra el boton de cerrar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("onClose")]),t("td",[s._v("funcion que se ejecuta cuando la notificación se cierra")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("onClick")]),t("td",[s._v("funcion que se ejecuta cuando se hace click en la notificación")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento.")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Metodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("Notification")]),s._v(" y "),t("code",{pre:!0},[s._v("this.$notify")]),s._v(" devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar "),t("code",{pre:!0},[s._v("close")]),s._v(" para ello.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")])])]),t("tbody",[t("tr",[t("td",[s._v("close")]),t("td",[s._v("cierra la notificación")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1415)},function(s,a,t){"use strict";function l(s){t(1416)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1418),n=t.n(e),r=t(1419),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1417);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("2a69ff13",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-pagination .source.first{padding:0}.demo-pagination .first .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-pagination .first .block:last-child{border-right:none}.demo-pagination .first .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-pagination .source.last{padding:0}.demo-pagination .last .block{padding:30px 24px;border-bottom:1px solid #eff2f6}.demo-pagination .last .block:last-child{border-bottom:none}.demo-pagination .last .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-pagination .last .demonstration+.el-pagination{float:right;width:70%;margin:5px 20px 0 0}",""])},function(s,a,t){"use strict";a.__esModule=!0;var l=t(4);a.default={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+" items per page")},handleCurrentChange:function(s){console.log("current page: "+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),a=s[0],t=s[s.length-1];(0,l.addClass)(a,"first"),(0,l.addClass)(t,"last")})}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Si tiene que mostrar muchos datos en una página, utilice la paginación.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n When you have few pages\n \n \n
    \n
    \n When you have more than 7 pages\n \n \n
    \n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("When you have few pages")]),t("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("When you have more than 7 pages")]),t("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),t("p",[s._v("Asigne en el atributo "),t("code",[s._v("layout")]),s._v(" los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: "),t("code",[s._v("prev")]),s._v(" (un botón para navegar a la página anterior), "),t("code",[s._v("next")]),s._v(" (un botón para navegar a la siguiente página), "),t("code",[s._v("pager")]),s._v(" (lista de página), "),t("code",[s._v("jumper")]),s._v(" (un "),t("code",[s._v("input")]),s._v(" para saltar a una página determinada), "),t("code",[s._v("total")]),s._v(" (total de elementos), "),t("code",[s._v("size")]),s._v(" (un "),t("code",[s._v("select")]),s._v(" para seleccionar el tamaño de la página ) y "),t("code",[s._v("->")]),s._v("(todo elemento situado luego de este símbolo será movido a la derecha).")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have few pages"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have more than 7 pages"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Usa una paginación pequeña en caso de espacio limitado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),t("p",[s._v("Solo ponga el atributo "),t("code",[s._v("small")]),s._v(" como "),t("code",[s._v("true")]),s._v(" y la Paginación se volverá pequeña.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("small")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Agrega más modulos basados en su escenario.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n methods: {\n handleSizeChange(val) {\n console.log(`${val} items per page`);\n },\n handleCurrentChange(val) {\n console.log(`current page: ${val}`);\n }\n },\n data() {\n return {\n currentPage1: 5,\n currentPage2: 5,\n currentPage3: 5,\n currentPage4: 4\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Total item count")]),t("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(a){s.currentPage1=a}}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Change page size")]),t("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(a){s.currentPage2=a}}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Jump to")]),t("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(a){s.currentPage3=a}}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("All combined")]),t("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(a){s.currentPage4=a}}})],1)]],2),t("p",[s._v("Este ejemplo es un completo caso de uso. Utiliza los eventos "),t("code",[s._v("size-change")]),s._v(" y "),t("code",[s._v("current-change")]),s._v(" para manejar el tamaño de página y el cambio de página. El atributo "),t("code",[s._v("page-sizes")]),s._v(" acepta un arreglo de enteros, cada uno representa un diferente valor del atributo "),t("code",[s._v("sizes")]),s._v(" que es un "),t("code",[s._v("select")]),s._v(", ejemplo "),t("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicará que el "),t("code",[s._v("select")]),s._v(" tendrá las opciones: 100, 200, 300 o 400 elementos por página.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"total, prev, pager, next"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Change page size"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":page-sizes")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sizes, prev, pager, next"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Jump to"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next, jumper"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("All combined"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":page-sizes")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"400"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleSizeChange(val) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-string"}},[s._v("`"),t("span",{attrs:{class:"hljs-subst"}},[s._v("${val}")]),s._v(" items per page`")]),s._v(");\n },\n handleCurrentChange(val) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-string"}},[s._v("`current page: "),t("span",{attrs:{class:"hljs-subst"}},[s._v("${val}")]),s._v("`")]),s._v(");\n }\n },\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage1")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage2")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage4")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v("\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"paginacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#paginacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Paginación")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"paginacion-pequena"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#paginacion-pequena","aria-hidden":"true"}},[s._v("¶")]),s._v(" Paginación pequeña")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"mas-elementos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-elementos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Más elementos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("small")]),t("td",[s._v("usar paginación pequeña")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("page-size")]),t("td",[s._v("cantidad de elementos por página")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("10")])]),t("tr",[t("td",[s._v("total")]),t("td",[s._v("total de elementos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("page-count")]),t("td",[s._v("total de páginas. Asigna "),t("code",{pre:!0},[s._v("total")]),s._v(" o "),t("code",{pre:!0},[s._v("page-count")]),s._v(" y las páginas serán mostradas; si necesitas "),t("code",{pre:!0},[s._v("page-sizes")]),s._v(", "),t("code",{pre:!0},[s._v("total")]),s._v(" es "),t("strong",[s._v("requerido")])]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("current-page")]),t("td",[s._v("número actual de la página, soporta el modificador .sync")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("1")])]),t("tr",[t("td",[s._v("layout")]),t("td",[s._v("layout de la paginación, elementos separados por coma")]),t("td",[s._v("string")]),t("td",[t("code",{pre:!0},[s._v("sizes")]),s._v(", "),t("code",{pre:!0},[s._v("prev")]),s._v(", "),t("code",{pre:!0},[s._v("pager")]),s._v(", "),t("code",{pre:!0},[s._v("next")]),s._v(", "),t("code",{pre:!0},[s._v("jumper")]),s._v(", "),t("code",{pre:!0},[s._v("->")]),s._v(", "),t("code",{pre:!0},[s._v("total")]),s._v(", "),t("code",{pre:!0},[s._v("slot")])]),t("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),t("tr",[t("td",[s._v("page-sizes")]),t("td",[s._v("opciones para la cantidad de elementos por página")]),t("td",[s._v("number[]")]),t("td",[s._v("—")]),t("td",[s._v("[10, 20, 30, 40, 50, 100]")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("clase propia para el "),t("code",{pre:!0},[s._v("dropdown")]),s._v(" del "),t("code",{pre:!0},[s._v("select")]),s._v(" del número de páginas")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("prev-text")]),t("td",[s._v("texto para el botón "),t("code",{pre:!0},[s._v("prev")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("next-text")]),t("td",[s._v("texto para el botón "),t("code",{pre:!0},[s._v("next")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("size-change")]),t("td",[s._v("se dispara cuando "),t("code",{pre:!0},[s._v("page-size")]),s._v(" cambia")]),t("td",[s._v("nuevo valor de "),t("code",{pre:!0},[s._v("page-size")])])]),t("tr",[t("td",[s._v("current-change")]),t("td",[s._v("se dispara cuando "),t("code",{pre:!0},[s._v("current-page")]),s._v(" cambia")]),t("td",[s._v("nuevo valor de "),t("code",{pre:!0},[s._v("current-page")])])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("Elemento propio. Para utilizar esto necesitas declarar "),t("code",{pre:!0},[s._v("slot")]),s._v(" en el "),t("code",{pre:!0},[s._v("layout")])])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1421)},function(s,a,t){"use strict";function l(s){t(1422)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1424),n=t.n(e),r=t(1425),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1423);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("2eeb41ea",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-box.demo-popover .el-popover+.el-popover{margin-left:10px}.demo-box.demo-popover .el-input{width:360px}.demo-box.demo-popover .el-button{margin-left:10px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{visible2:!1,gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}],gridData2:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City",$info:!0},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City",$positive:!0}],gridData3:[{tag:"Home",date:"2016-05-03",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-02",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-04",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-01",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-08",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-06",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-07",name:"Jack",address:"New York City"}],singleSelection:{},multipleSelection:[],model:""}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\nHover to activate\nClick to activate\n\n Focus to activate\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),t("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("Hover to activate")]),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("Click to activate")]),t("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[t("el-button",{attrs:{slot:"reference"},slot:"reference"},[s._v("Focus to activate")])],1)],1),t("p",[s._v("Agrega "),t("code",[s._v("ref")]),s._v(" al popover, luego en el botón usa la directiva "),t("code",[s._v("v-popover")]),s._v(" para asociar el botón y el popover. El atributo "),t("code",[s._v("trigger")]),s._v(" es usado para definir como el popover se dispara: "),t("code",[s._v("hover")]),s._v(", "),t("code",[s._v("click")]),s._v(" o "),t("code",[s._v("focus")]),s._v(". De manera alternativa puede especificar la referencia utilizando un "),t("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Named-Slots"}},[s._v("slot con nombre")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"popover1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top-start"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"popover2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover1")]),s._v(">")]),s._v("Hover to activate"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover2")]),s._v(">")]),s._v("Click to activate"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"focus"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(">")]),s._v("Focus to activate"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n\n\nClick to activate\n\n\n',script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-04',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-01',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-03',\n name: 'Jack',\n address: 'New York City'\n }]\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[t("el-table",{attrs:{data:s.gridData}},[t("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),t("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),t("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1)],1),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("Click to activate")])],1),t("p",[s._v("Reemplaza el atributo "),t("code",[s._v("content")]),s._v(" con un "),t("code",[s._v("slot")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"popover4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"400"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover4")]),s._v(">")]),s._v("Click to activate"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("gridData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }]\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n

    Are you sure to delete this?

    \n
    \n cancel\n confirm\n
    \n    \n\nDelete\n\n\n',script:"\n export default {\n data() {\n return {\n visible2: false,\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-popover",{ref:"popover5",attrs:{placement:"top",width:"160"},model:{value:s.visible2,callback:function(a){s.visible2=a},expression:"visible2"}},[t("p",[s._v("Are you sure to delete this?")]),t("div",{staticStyle:{"text-align":"right",margin:"0"}},[t("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(a){s.visible2=!1}}},[s._v("cancel")]),t("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(a){s.visible2=!1}}},[s._v("confirm")])],1)]),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("Delete")])],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"popover5"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"160"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"visible2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Are you sure to delete this?"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"visible2 = false"')]),s._v(">")]),s._v("cancel"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"visible2 = false"')]),s._v(">")]),s._v("confirm"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover5")]),s._v(">")]),s._v("Delete"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("visible2")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")]),t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("trigger")]),t("td",[s._v("cómo se dispara el popover")]),t("td",[s._v("string")]),t("td",[s._v("click/focus/hover/manual")]),t("td",[s._v("click")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("título del popover")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("content")]),t("td",[s._v("contenido del popover, puede ser sustituido por un "),t("code",{pre:!0},[s._v("slot")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("ancho del popover")]),t("td",[s._v("string, number")]),t("td",[s._v("—")]),t("td",[s._v("Min width 150px")])]),t("tr",[t("td",[s._v("placement")]),t("td",[s._v("posición del popover en la pantalla")]),t("td",[s._v("string")]),t("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),t("td",[s._v("bottom")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el popover está deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value(v-model)")]),t("td",[s._v("si el popover está visible")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("popover offset")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("transition")]),t("td",[s._v("popover transition animation")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-fade-in-linear")])]),t("tr",[t("td",[s._v("visible-arrow")]),t("td",[s._v("si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("popper-options")]),t("td",[s._v("parámetros para "),t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),t("td",[s._v("object")]),t("td",[s._v("por favor, refiérase a "),t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),t("td",[t("code",{pre:!0},[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("clase propia para popover")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("open-delay")]),t("td",[s._v("retraso de la aparición cuando "),t("code",{pre:!0},[s._v("trigger")]),s._v(" es hover, en milisegundos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])]),t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")]),t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("texto contenido en popover")])]),t("tr",[t("td",[s._v("reference")]),t("td",[s._v("elemento HTML que dispara el popover")])])])]),t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")]),t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("show")]),t("td",[s._v("se dispara cuando se muestra el popover")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("hide")]),t("td",[s._v("se dispara cuando se oculta el popover")]),t("td",[s._v("—")])])])])])])],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Similar a un Tooltip, Popover está construido con "),t("code",{pre:!0},[s._v("Vue-popper")]),s._v(". Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"informacion-anidada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#informacion-anidada","aria-hidden":"true"}},[s._v("¶")]),s._v(" Información anidada")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"operacion-anidada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#operacion-anidada","aria-hidden":"true"}},[s._v("¶")]),s._v(" Operación anidada")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un "),t("code",{pre:!0},[s._v("dialog")]),s._v(".")])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1427)},function(s,a,t){"use strict";function l(s){t(1428)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1430),n=t(0),r=l,v=n(null,e.a,!1,r,null,null);a.default=v.exports},function(s,a,t){var l=t(1429);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("942aaf90",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-box.demo-progress .el-progress--line{margin-bottom:15px;width:350px}.demo-box.demo-progress .el-progress--circle{margin-right:15px}",""])},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-progress",{attrs:{percentage:0}}),t("el-progress",{attrs:{percentage:70}}),t("el-progress",{attrs:{percentage:100,status:"success"}}),t("el-progress",{attrs:{percentage:50,status:"exception"}})],1),t("p",[s._v("Usa el atributo "),t("code",[s._v("percentage")]),s._v(" para asignar el porcentage. Este es "),t("strong",[s._v("requerido")]),s._v(" y tiene que ser un valor entre "),t("code",[s._v("0-100")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("En este caso el porcentage no toma espacio adicional.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),t("p",[s._v("El atributo "),t("code",[s._v("stroke-width")]),s._v(" decide el ancho de la barra de progreso, y usa el atributo "),t("code",[s._v("text-inside")]),s._v(" para poner la descripción dentro de la misma.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-progress",{attrs:{type:"circle",percentage:0}}),t("el-progress",{attrs:{type:"circle",percentage:25}}),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),t("p",[s._v("Puede asignar el atributo "),t("code",[s._v("type")]),s._v(" como "),t("code",[s._v("circle")]),s._v(" para usar la barra circular de progreso, y usar el atributo "),t("code",[s._v("width")]),s._v(" para cambiar el tamaño del círculo.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"25"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"progreso"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progreso","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progreso")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-externo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-externo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Barra de progreso lineal (porcentage externo)")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-interno"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-interno","aria-hidden":"true"}},[s._v("¶")]),s._v(" Barra de progreso lineal (porcentage interno)")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"barra-de-progreso-circular"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-circular","aria-hidden":"true"}},[s._v("¶")]),s._v(" Barra de progreso circular")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptado")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("percentage")]),t("td",[s._v("porcentaje, requerido")]),t("td",[s._v("number")]),t("td",[s._v("0-100")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de barra de progreso")]),t("td",[s._v("string")]),t("td",[s._v("line/circle")]),t("td",[s._v("line")])]),t("tr",[t("td",[s._v("stroke-width")]),t("td",[s._v("ancho de la barra de progreso")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("6")])]),t("tr",[t("td",[s._v("text-inside")]),t("td",[s._v("mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando "),t("code",{pre:!0},[s._v("type")]),s._v(" es 'line'")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("status")]),t("td",[s._v("estado actual de la barra de progreso")]),t("td",[s._v("string")]),t("td",[s._v("success/exception")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("ancho del canvas que contiene la barra de progreso circula")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("126")])]),t("tr",[t("td",[s._v("show-text")]),t("td",[s._v("mostrar porcentaje")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1432)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1433),e=t(0),n=e(null,l.a,!1,null,null,null);a.default=n.exports},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"inicio-rapido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inicio-rapido","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inicio rápido")]),t("p",[s._v("Esta sección te guía en el proceso de usar Element con webpack en un proyecto.")]),t("h3",{attrs:{id:"usa-la-plantilla-de-kit-de-inicio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usa-la-plantilla-de-kit-de-inicio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Usa la plantilla de Kit de inicio")]),t("p",[s._v("Proveemos una plantilla general "),t("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[s._v("project template")]),s._v(". Para los usuarios de Laravel, también tenemos "),t("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[s._v("template")]),s._v(". Puedes descargarlas y agregarlas directamente también.")]),t("p",[s._v("Si prefiere no utilizarlas, lee las siguientes secciones de este documento.")]),t("h3",{attrs:{id:"usando-vue-cli"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usando-vue-cli","aria-hidden":"true"}},[s._v("¶")]),s._v(" Usando vue-cli")]),t("p",[s._v("Podemos empezar un proyecto utilizando "),t("a",{attrs:{href:"https://github.com/vuejs/vue-cli"}},[s._v("vue-cli")]),s._v(":")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-shell"}},[s._v("> npm i -g vue-cli\n> mkdir my-project && cd my-project\n> vue init webpack\n> npm i && npm i element-ui\n")])]),t("h3",{attrs:{id:"importando-element"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importando-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Importando Element")]),t("p",[s._v("Puede importar Element completamente o solamente importar lo que necesite. Comencemos importando todo.")]),t("h4",{attrs:{id:"importando-todo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importando-todo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Importando todo")]),t("p",[s._v("In main.js:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-chalk/index.css'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),t("p",[s._v("El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.")]),t("h4",{attrs:{id:"en-demanda"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#en-demanda","aria-hidden":"true"}},[s._v("¶")]),s._v(" En demanda")]),t("p",[s._v("Con la ayuda de "),t("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v(", podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera.")]),t("p",[s._v("Primero, instale babel-plugin-component:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-bash"}},[s._v("npm install babel-plugin-component -D\n")])]),t("p",[s._v("Luego edite .babelrc:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-json"}},[s._v("{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"presets"')]),s._v(": [\n ["),t("span",{attrs:{class:"hljs-string"}},[s._v('"es2015"')]),s._v(", { "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"modules"')]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(" }]\n ],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [["),t("span",{attrs:{class:"hljs-string"}},[s._v('"component"')]),s._v(", {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"libraryName"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"element-ui"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"styleLibraryName"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"theme-chalk"')]),s._v("\n }\n ]]\n}\n")])]),t("p",[s._v("Luego, si necesita Button y Select, edite main.js:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),t("p",[s._v("Ejemplo completo (Referencia completa de componentes "),t("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[s._v("components.json")]),s._v(")")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n Pagination,\n Dialog,\n Autocomplete,\n Dropdown,\n DropdownMenu,\n DropdownItem,\n Menu,\n Submenu,\n MenuItem,\n MenuItemGroup,\n Input,\n InputNumber,\n Radio,\n RadioGroup,\n RadioButton,\n Checkbox,\n CheckboxButton,\n CheckboxGroup,\n Switch,\n Select,\n Option,\n OptionGroup,\n Button,\n ButtonGroup,\n Table,\n TableColumn,\n DatePicker,\n TimeSelect,\n TimePicker,\n Popover,\n Tooltip,\n Breadcrumb,\n BreadcrumbItem,\n Form,\n FormItem,\n Tabs,\n TabPane,\n Tag,\n Tree,\n Alert,\n Slider,\n Icon,\n Row,\n Col,\n Upload,\n Progress,\n Badge,\n Card,\n Rate,\n Steps,\n Step,\n Carousel,\n CarouselItem,\n Collapse,\n CollapseItem,\n Cascader,\n ColorPicker,\n Transfer,\n Container,\n Header,\n Aside,\n Main,\n Footer,\n Loading,\n MessageBox,\n Message,\n Notification\n} "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n\nVue.use(Pagination)\nVue.use(Dialog)\nVue.use(Autocomplete)\nVue.use(Dropdown)\nVue.use(DropdownMenu)\nVue.use(DropdownItem)\nVue.use(Menu)\nVue.use(Submenu)\nVue.use(MenuItem)\nVue.use(MenuItemGroup)\nVue.use(Input)\nVue.use(InputNumber)\nVue.use(Radio)\nVue.use(RadioGroup)\nVue.use(RadioButton)\nVue.use(Checkbox)\nVue.use(CheckboxGroup)\nVue.use(Switch)\nVue.use(Select)\nVue.use(Option)\nVue.use(OptionGroup)\nVue.use(Button)\nVue.use(ButtonGroup)\nVue.use(Table)\nVue.use(TableColumn)\nVue.use(DatePicker)\nVue.use(TimeSelect)\nVue.use(TimePicker)\nVue.use(Popover)\nVue.use(Tooltip)\nVue.use(Breadcrumb)\nVue.use(BreadcrumbItem)\nVue.use(Form)\nVue.use(FormItem)\nVue.use(Tabs)\nVue.use(TabPane)\nVue.use(Tag)\nVue.use(Tree)\nVue.use(Alert)\nVue.use(Slider)\nVue.use(Icon)\nVue.use(Row)\nVue.use(Col)\nVue.use(Upload)\nVue.use(Progress)\nVue.use(Badge)\nVue.use(Card)\nVue.use(Rate)\nVue.use(Steps)\nVue.use(Step)\nVue.use(Carousel)\nVue.use(CarouselItem)\nVue.use(Collapse)\nVue.use(CollapseItem)\nVue.use(Cascader)\nVue.use(ColorPicker)\nVue.use(Container)\nVue.use(Header)\nVue.use(Aside)\nVue.use(Main)\nVue.use(Footer)\n\nVue.use(Loading.directive)\n\nVue.prototype.$loading = Loading.service\nVue.prototype.$msgbox = MessageBox\nVue.prototype.$alert = MessageBox.alert\nVue.prototype.$confirm = MessageBox.confirm\nVue.prototype.$prompt = MessageBox.prompt\nVue.prototype.$notify = Notification\nVue.prototype.$message = Message\n")])]),t("h3",{attrs:{id:"configuracion-global"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#configuracion-global","aria-hidden":"true"}},[s._v("¶")]),s._v(" Configuración global")]),t("p",[s._v("Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene una propiedad: "),t("code",{pre:!0},[s._v("size")]),s._v(", que define el tamaño por defecto de todos los componentes:")]),t("p",[s._v("Importando Element completamente：")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-JS"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\nVue.use(Element, { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'small'")]),s._v(" })\n")])]),t("p",[s._v("Importando Element parcialmente：")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-JS"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n\nVue.prototype.$ELEMENT = { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'small'")]),s._v(" }\nVue.use(Button)\n")])]),t("p",[s._v("Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo "),t("code",{pre:!0},[s._v("size")]),s._v(" será "),t("code",{pre:!0},[s._v("small")]),s._v(".")]),t("h3",{attrs:{id:"empiece-ya"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#empiece-ya","aria-hidden":"true"}},[s._v("¶")]),s._v(" Empiece ya!")]),t("p",[s._v("Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Inicie el modo de desarrollo:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-bash"}},[s._v("npm run dev\n")])]),t("p",[s._v("Build:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-bash"}},[s._v("npm run build\n")])]),t("p",[s._v("Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.")])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1435)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1436),e=t.n(l),n=t(1437),r=t(0),v=r(e.a,n.a,!1,null,null,null);a.default=v.exports},function(s,a,t){"use strict";s.exports={data:function(){return{radio:"1",radio1:"selected and disabled",radio2:3,radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York",radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Selección única entre múltiples opciones.")]),s._m(1),t("p",[s._v("El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.")]),s._m(2),s._m(3),t("p",[s._v(":::")]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio1: 'selected and disabled'\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:s.radio1,callback:function(a){s.radio1=a},expression:"radio1"}},[s._v("Option A")]),t("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:s.radio1,callback:function(a){s.radio1=a},expression:"radio1"}},[s._v("Option B")])]],2),t("p",[s._v("Solo necesita agregar el atributo "),t("code",[s._v("disabled")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(">")]),s._v("Option A"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selected and disabled"')]),s._v(">")]),s._v("Option B"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("radio1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'selected and disabled'")]),s._v("\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Recomendado para seleccionar opciones que se excluyen mutuamente.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Option A\n Option B\n Option C\n\n\n\n',script:"\n export default {\n data () {\n return {\n radio2: 3\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-radio-group",{model:{value:s.radio2,callback:function(a){s.radio2=a},expression:"radio2"}},[t("el-radio",{attrs:{label:3}},[s._v("Option A")]),t("el-radio",{attrs:{label:6}},[s._v("Option B")]),t("el-radio",{attrs:{label:9}},[s._v("Option C")])],1)],1),t("p",[s._v("Combine "),t("code",[s._v("el-radio-group")]),s._v(" con "),t("code",[s._v("el-radio")]),s._v(" para mostrar un grupo de Radios. Enlace la variable con "),t("code",[s._v("v-model")]),s._v(" del elemento "),t("code",[s._v("el-radio-group")]),s._v(" y asigne el valor del "),t("code",[s._v("label")]),s._v(" en "),t("code",[s._v("el-radio")]),s._v(". Se provee el evento "),t("code",[s._v("change")]),s._v(" con el valor actual como parámetro.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("Option A"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),s._v("Option B"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(">")]),s._v("Option C"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("radio2")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v("\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Radio con estilo de botón.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio3: 'New York',\n radio4: 'New York',\n radio5: 'New York',\n radio6: 'New York'\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-radio-group",{model:{value:s.radio3,callback:function(a){s.radio3=a},expression:"radio3"}},[t("el-radio-button",{attrs:{label:"New York"}}),t("el-radio-button",{attrs:{label:"Washington"}}),t("el-radio-button",{attrs:{label:"Los Angeles"}}),t("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio-group",{attrs:{size:"medium"},model:{value:s.radio4,callback:function(a){s.radio4=a},expression:"radio4"}},[t("el-radio-button",{attrs:{label:"New York"}}),t("el-radio-button",{attrs:{label:"Washington"}}),t("el-radio-button",{attrs:{label:"Los Angeles"}}),t("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio-group",{attrs:{size:"small"},model:{value:s.radio5,callback:function(a){s.radio5=a},expression:"radio5"}},[t("el-radio-button",{attrs:{label:"New York"}}),t("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t("el-radio-button",{attrs:{label:"Los Angeles"}}),t("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:s.radio6,callback:function(a){s.radio6=a},expression:"radio6"}},[t("el-radio-button",{attrs:{label:"New York"}}),t("el-radio-button",{attrs:{label:"Washington"}}),t("el-radio-button",{attrs:{label:"Los Angeles"}}),t("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2),t("p",[s._v("Solo necesita cambiar el elemento "),t("code",[s._v("el-radio")]),s._v(" a "),t("code",[s._v("el-radio-button")]),s._v(". Se provee el atributo "),t("code",[s._v("size")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(" >")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio5"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" >")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("radio3")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("radio4")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("radio5")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("radio6")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v("\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio7: '1',\n radio8: '1',\n radio9: '1',\n radio10: '1'\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-radio",{attrs:{label:"1",border:""},model:{value:s.radio7,callback:function(a){s.radio7=a},expression:"radio7"}},[s._v("Option A")]),t("el-radio",{attrs:{label:"2",border:""},model:{value:s.radio7,callback:function(a){s.radio7=a},expression:"radio7"}},[s._v("Option B")])],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:s.radio8,callback:function(a){s.radio8=a},expression:"radio8"}},[s._v("Option A")]),t("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:s.radio8,callback:function(a){s.radio8=a},expression:"radio8"}},[s._v("Option B")])],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio-group",{attrs:{size:"small"},model:{value:s.radio9,callback:function(a){s.radio9=a},expression:"radio9"}},[t("el-radio",{attrs:{label:"1",border:""}},[s._v("Option A")]),t("el-radio",{attrs:{label:"2",border:"",disabled:""}},[s._v("Option B")])],1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:s.radio10,callback:function(a){s.radio10=a},expression:"radio10"}},[t("el-radio",{attrs:{label:"1",border:""}},[s._v("Option A")]),t("el-radio",{attrs:{label:"2",border:""}},[s._v("Option B")])],1)],1)]],2),t("p",[s._v("El atributo "),t("code",[s._v("border")]),s._v(" agrega un borde al elemento Radio.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio7"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio7"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option B"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Option A"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Option B"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio9"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Option B"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio10"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option B"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("radio7")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("radio8")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("radio9")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("radio10")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v(":::Demo Crear un elemento Radio es fácil, solo necesita enlazar("),t("code",{pre:!0},[s._v("bind")]),s._v(") una variable a la directiva "),t("code",{pre:!0},[s._v("v-model")]),s._v(" del Radio. Va a ser igual al valor "),t("code",{pre:!0},[s._v("label")]),s._v(" del Radio seleccionado. El tipo de dato de "),t("code",{pre:!0},[s._v("label")]),s._v(" es "),t("code",{pre:!0},[s._v("String")]),s._v(", "),t("code",{pre:!0},[s._v("Number")]),s._v(" o "),t("code",{pre:!0},[s._v("Boolean")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Option A"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"radio"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("Option B"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("radio")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#deshabilitado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Deshabilitado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("El atributo "),t("code",{pre:!0},[s._v("disabled")]),s._v(" es utilizado para deshabilitar un Radio.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"grupo-de-elementos-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-elementos-radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grupo de elementos Radio")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"estilo-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Estilo Button")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Con bordes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de Radio")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores Aceptado")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("el valor del Radio")]),t("td",[s._v("string / number / boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el Radio está deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("border")]),t("td",[s._v("agregar borde alrededor del elemento Radio")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del elemento Radio, solo funciona si "),t("code",{pre:!0},[s._v("border")]),s._v(" es verdadero")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("atributo nativo 'name'")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-radio-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de Radio-button")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores Aceptado")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("el valor del Radio")]),t("td",[s._v("string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el Radio está deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("atributo nativo 'name'")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de Radio-group")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores Aceptado")]),t("th",[s._v("Valores por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño de los "),t("code",{pre:!0},[s._v("radio buttons")]),s._v(" o "),t("code",{pre:!0},[s._v("bordered radios")])]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si la anidación de radios está desahabilitada")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("color de las letras cuando el botón está activo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#ffffff")])]),t("tr",[t("td",[s._v("fill")]),t("td",[s._v("color del borde y fondo cuando el botón está activo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#409EFF")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos de Radio")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor cambia")]),t("td",[s._v("el valor del "),t("code",{pre:!0},[s._v("label")]),s._v(" del Radio seleccionado")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos de Radio-group")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor cambia")]),t("td",[s._v("el valor del "),t("code",{pre:!0},[s._v("label")]),s._v(" del Radio seleccionado")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1439)},function(s,a,t){"use strict";function l(s){t(1440)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1442),n=t.n(e),r=t(1443),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1441);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("aa3b551c",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-rate .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-rate .block:last-child{border-right:none}.demo-rate .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){document.querySelector(".source").style.padding="0"})}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Usado para la calificación")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n \n
    \n
    \n Color for different levels\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value1: null,\n value2: null\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default")]),t("el-rate",{model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),t("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})],1)]),t("p",[s._v("Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo "),t("code",[s._v("colors")]),s._v(" y sus dos umbrales pueden ser definidos con "),t("code",[s._v("low-treshold")]),s._v(" y "),t("code",[s._v("high-treshold")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Color for different levels"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":colors")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Usa texto para indicar la puntuación")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value3: null\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})],1),t("p",[s._v("Agregar el atributo "),t("code",[s._v("show-text")]),s._v(" para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando "),t("code",[s._v("texts")]),s._v(". "),t("code",[s._v("texts")]),s._v(" es un arreglo cuya longitud debe ser igual a la máxima puntuación "),t("code",[s._v("max")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":texts")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"['oops', 'disappointed', 'normal', 'good', 'great']\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-text")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Puede utilizar iconos para diferenciar cada componente.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value4: null\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1),t("p",[s._v("Puede customizar iconos para tres niveles diferentes usando "),t("code",[s._v("icon-classes")]),s._v(". En este ejemplo también usamos "),t("code",[s._v("void-icon-class")]),s._v(" para asignar un icono si no está seleccionado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":icon-classes")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("void-icon-class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"icon-rate-face-off"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":colors")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("La calificación de solo lectura es para mostrar la puntuación. Soporta media estrella.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n value5: 3.7\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})],1),t("p",[s._v("Use el atributo "),t("code",[s._v("disabled")]),s._v(" para hacer el componente de solo lectura. Agregar "),t("code",[s._v("show-score")]),s._v(" para mostrar la puntuación en el lado derecho. Además, puede usar el atributo "),t("code",[s._v("score-template")]),s._v(" para proveer una plantilla. Tiene que contener "),t("code",[s._v("{value}")]),s._v(", y "),t("code",[s._v("{value}")]),s._v(" será sustituido por la puntuación.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-score")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#ff9900"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("score-template")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"{value} points"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("3.7")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"calificacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#calificacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Calificación")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"con-texto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-texto","aria-hidden":"true"}},[s._v("¶")]),s._v(" Con texto")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"mas-iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-iconos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Más iconos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"solo-lectura"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#solo-lectura","aria-hidden":"true"}},[s._v("¶")]),s._v(" Solo lectura")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptado")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("max")]),t("td",[s._v("puntuación máxima")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("5")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si la calificación es de solo lectura")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("allow-half")]),t("td",[s._v("si escoger media estrella está permitido")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("low-threshold")]),t("td",[s._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("2")])]),t("tr",[t("td",[s._v("high-threshold")]),t("td",[s._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("4")])]),t("tr",[t("td",[s._v("colors")]),t("td",[s._v("arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),t("tr",[t("td",[s._v("void-color")]),t("td",[s._v("color para iconos no seleccionados")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#C6D1DE")])]),t("tr",[t("td",[s._v("disabled-void-color")]),t("td",[s._v("color para las iconos no seleccionados de solo lectura")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#EFF2F7")])]),t("tr",[t("td",[s._v("icon-classes")]),t("td",[s._v("arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),t("tr",[t("td",[s._v("void-icon-class")]),t("td",[s._v("nombre de clase para iconos no seleccionados")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-star-off")])]),t("tr",[t("td",[s._v("disabled-void-icon-class")]),t("td",[s._v("nombre de clase para elementos no seleccionados de solo lectura")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-star-on")])]),t("tr",[t("td",[s._v("show-text")]),t("td",[s._v("muestra el texto")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-score")]),t("td",[s._v("muestra puntuación actual. "),t("code",{pre:!0},[s._v("show-score")]),s._v(" y "),t("code",{pre:!0},[s._v("show-text")]),s._v(" no pueden ser verdaderos al mismo tiempo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("color del texto")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#1F2D3D")])]),t("tr",[t("td",[s._v("texts")]),t("td",[s._v("arreglo de textos")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),t("tr",[t("td",[s._v("score-template")]),t("td",[s._v("plantilla de puntuación")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("{value}")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("Se dispara cuando la puntuación es cambiada")]),t("td",[s._v("valor luego del cambio")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1445)},function(s,a,t){"use strict";function l(s){t(1446)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1448),n=t.n(e),r=t(1449),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1447);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("461ad21c",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-select .el-select{width:240px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{list:null,options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City Name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:[],value10:[],value11:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(s){return{value:s,label:s}})},methods:{remoteMethod:function(s){var a=this;""!==s?(this.loading=!0,setTimeout(function(){a.loading=!1,a.options4=a.list.filter(function(a){return a.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{placeholder:"Select"},model:{value:s.value,callback:function(a){s.value=a},expression:"value"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),t("p",[t("code",[s._v("v-model")]),s._v(" es el valor de "),t("code",[s._v("el-option")]),s._v(" que está seleccionado actualmente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2',\n disabled: true\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value2: ''\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{placeholder:"Select"},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}},s._l(s.options2,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),t("p",[s._v("Establezca el valor de "),t("code",[s._v("disabled")]),s._v(" en "),t("code",[s._v("el-option")]),s._v(" como "),t("code",[s._v("true")]),s._v(" para deshabilitar esta opción.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in options2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options2")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Desactivar todo el componente.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value3: ''\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),t("p",[s._v("Configure "),t("code",[s._v("disabled")]),s._v(" de "),t("code",[s._v("el-select")]),s._v(" para deshabilitarla.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puede limpiar un Select con un icono.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value4: ''\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),t("p",[s._v("Establezca el atributo "),t("code",[s._v("clearable")]),s._v(" para "),t("code",[s._v("el-select")]),s._v(" y aparecerá un icono. Tenga en cuenta que la opción "),t("code",[s._v("clearable")]),s._v(" es sólo para una selección individual.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("clearable")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Selección multiple utiliza tags para mostrar las opciones seleccionadas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})})),t("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:s.value11,callback:function(a){s.value11=a},expression:"value11"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),t("p",[s._v("Configure el atributo "),t("code",[s._v("multiple")]),s._v(" para "),t("code",[s._v("el-select")]),s._v(" para habilitar el modo múltiple. En este caso, el valor del "),t("code",[s._v("v-model")]),s._v(" será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo "),t("code",[s._v("collapse-tags")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value11"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("collapse-tags")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-left: 20px;"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": []\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Puede personalizar templates HTML para las opciones.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n cities: [{\n value: 'Beijing',\n label: 'Beijing'\n }, {\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Nanjing',\n label: 'Nanjing'\n }, {\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }],\n value6: ''\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{placeholder:"Select"},model:{value:s.value6,callback:function(a){s.value6=a},expression:"value6"}},s._l(s.cities,function(a){return t("el-option",{key:a.value,attrs:{label:a.label,value:a.value}},[t("span",{staticStyle:{float:"left"}},[s._v(s._s(a.label))]),t("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(a.value))])])}))]],2),t("p",[s._v("Inserte templates HTML personalizados en el slot de "),t("code",[s._v("el-option")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in cities"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"float: left"')]),s._v(">")]),s._v("{{ item.label }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),s._v("{{ item.value }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Nanjing'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Nanjing'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Mostrar opciones en grupos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options3: [{\n label: 'Popular cities',\n options: [{\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Beijing',\n label: 'Beijing'\n }]\n }, {\n label: 'City name',\n options: [{\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }, {\n value: 'Dalian',\n label: 'Dalian'\n }]\n }],\n value7: ''\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{placeholder:"Select"},model:{value:s.value7,callback:function(a){s.value7=a},expression:"value7"}},s._l(s.options3,function(a){return t("el-option-group",{key:a.label,attrs:{label:a.label}},s._l(a.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),t("p",[s._v("Utilice "),t("code",[s._v("el-option-group")]),s._v(" para agrupar las opciones, y su atributo "),t("code",[s._v("label")]),s._v(" representa el nombre del grupo.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option-group")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"group in options3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"group.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"group.label"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in group.options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options3")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Popular cities'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'City name'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dalian'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Dalian'")]),s._v("\n }]\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Puede filtrar opciones como lo desee.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value8: ''\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:s.value8,callback:function(a){s.value8=a},expression:"value8"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),t("p",[s._v("Añadir "),t("code",[s._v("filterable")]),s._v(" a "),t("code",[s._v("el-select")]),s._v(" permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo"),t("code",[s._v("label")]),s._v(" contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el "),t("code",[s._v("filter-method")]),s._v(". "),t("code",[s._v("filter-method")]),s._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),t("p",[s._v("Introduzca palabras y datos para buscar desde el servidor.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:'\n export default {\n data() {\n return {\n options4: [],\n value9: [],\n list: [],\n loading: false,\n states: ["Alabama", "Alaska", "Arizona",\n "Arkansas", "California", "Colorado",\n "Connecticut", "Delaware", "Florida",\n "Georgia", "Hawaii", "Idaho", "Illinois",\n "Indiana", "Iowa", "Kansas", "Kentucky",\n "Louisiana", "Maine", "Maryland",\n "Massachusetts", "Michigan", "Minnesota",\n "Mississippi", "Missouri", "Montana",\n "Nebraska", "Nevada", "New Hampshire",\n "New Jersey", "New Mexico", "New York",\n "North Carolina", "North Dakota", "Ohio",\n "Oklahoma", "Oregon", "Pennsylvania",\n "Rhode Island", "South Carolina",\n "South Dakota", "Tennessee", "Texas",\n "Utah", "Vermont", "Virginia",\n "Washington", "West Virginia", "Wisconsin",\n "Wyoming"]\n }\n },\n mounted() {\n this.list = this.states.map(item => {\n return { value: item, label: item };\n });\n },\n methods: {\n remoteMethod(query) {\n if (query !== \'\') {\n this.loading = true;\n setTimeout(() => {\n this.loading = false;\n this.options4 = this.list.filter(item => {\n return item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > -1;\n });\n }, 200);\n } else {\n this.options4 = [];\n }\n }\n }\n }\n',style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":s.remoteMethod,loading:s.loading},model:{value:s.value9,callback:function(a){s.value9=a},expression:"value9"}},s._l(s.options4,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),t("p",[s._v("Configure el valor de "),t("code",[s._v("filterable")]),s._v(" y "),t("code",[s._v("remote")]),s._v(" con "),t("code",[s._v("true")]),s._v(" para habilitar la búsqueda remota, y debería pasar el método "),t("code",[s._v("remote-method")]),s._v(". "),t("code",[s._v("remote-method")]),s._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si "),t("code",[s._v("el-option")]),s._v(" se presenta con la directiva "),t("code",[s._v("v-for")]),s._v(", debe agregar el atributo "),t("code",[s._v("key")]),s._v(" para "),t("code",[s._v("el-option")]),s._v(". Su valor tiene que ser unívoco, como el valor de "),t("code",[s._v("item.value")]),s._v(" en el ejemplo siguiente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("remote")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("reserve-keyword")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Please enter a keyword"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":remote-method")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"remoteMethod"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":loading")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in options4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options4")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("list")]),s._v(": [],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loading")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("states")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v('"Alabama"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Alaska"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Arizona"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Arkansas"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"California"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Colorado"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Connecticut"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Delaware"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Florida"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Georgia"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Hawaii"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Idaho"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Illinois"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Indiana"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Iowa"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Kansas"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Kentucky"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Louisiana"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Maine"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Maryland"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Massachusetts"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Michigan"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Minnesota"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Mississippi"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Missouri"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Montana"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nebraska"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nevada"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"New Hampshire"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"New Jersey"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"New Mexico"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"North Carolina"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"North Dakota"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Ohio"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Oklahoma"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Oregon"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pennsylvania"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Rhode Island"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"South Carolina"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"South Dakota"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Tennessee"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Texas"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Utah"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Vermont"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Virginia"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"West Virginia"')]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Wisconsin"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Wyoming"')]),s._v("]\n }\n },\n mounted() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".list = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".states.map("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": item, "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": item };\n });\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n remoteMethod(query) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (query !== "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loading = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loading = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options4 = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".list.filter("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > "),t("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n });\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("200")]),s._v(");\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options4 = [];\n }\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),t("p",[s._v("Crear y seleccionar nuevos items que no están incluidas en las opciones de selección.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options5: [{\n value: 'HTML',\n label: 'HTML'\n }, {\n value: 'CSS',\n label: 'CSS'\n }, {\n value: 'JavaScript',\n label: 'JavaScript'\n }],\n value10: []\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:s.value10,callback:function(a){s.value10=a},expression:"value10"}},s._l(s.options5,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),t("p",[s._v("Al utilizar el atributo "),t("code",[s._v("allow-create")]),s._v(", los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que "),t("code",[s._v("allow-create")]),s._v(" funcione, "),t("code",[s._v("filterable")]),s._v(" debe ser "),t("code",[s._v("true")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("allow-create")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Choose tags for your article"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in options5"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("options5")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'HTML'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'HTML'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CSS'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CSS'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'JavaScript'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'JavaScript'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": []\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"disabled-en-el-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled en el-option")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"disabled-en-el-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled en el-select")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"select-simple-limpiable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-simple-limpiable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select simple limpiable")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"seleccion-multiple-basica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple-basica","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selección múltiple básica")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"personalizar-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizar-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Personalizar template")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"agrupando"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agrupando","aria-hidden":"true"}},[s._v("¶")]),s._v(" Agrupando")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"filtrado-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-opciones","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filtrado de opciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"busqueda-remota"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[s._v("¶")]),s._v(" Búsqueda remota")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"crear-nuevos-items"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#crear-nuevos-items","aria-hidden":"true"}},[s._v("¶")]),s._v(" Crear nuevos items")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("Si el valor de encuadernación de Select es un objeto, asegúrese de asignar "),t("code",{pre:!0},[s._v("value-key")]),s._v(" como el nombre único de la clave de identidad.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"select-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("multiple")]),t("td",[s._v("si multiple-select esta activo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si Select esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("collapse-tags")]),t("td",[s._v("si se colapsan los tags a un texto cuando "),t("code",{pre:!0},[s._v("multiple")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v(".")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value-key")]),t("td",[s._v("nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto.")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("value")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del Input")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("si el single select puede ser limpiable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("multiple-limit")]),t("td",[s._v("maximo numero de opciones que el usuario puede seleccionar cuando "),t("code",{pre:!0},[s._v("multiple")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v(". Sin límite cuando se fija a 0")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("el atributo "),t("code",{pre:!0},[s._v("name")]),s._v(" del input seleccionado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("auto-complete")]),t("td",[s._v("el atributo "),t("code",{pre:!0},[s._v("autocomplete")]),s._v(" del input seleccionado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("off")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Select")])]),t("tr",[t("td",[s._v("filterable")]),t("td",[s._v("si Select es filtrable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("allow-create")]),t("td",[s._v("si esta permitido crear nuevos items. Para usar esto, "),t("code",{pre:!0},[s._v("filterable")]),s._v(" debe ser "),t("code",{pre:!0},[s._v("true")]),s._v(".")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("filter-method")]),t("td",[s._v("metodo de filtrado personalizado")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("remote")]),t("td",[s._v("si las opciones se traeran desde el servidor")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("remote-method")]),t("td",[s._v("metodo de busqueda remota personalizada")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("loading")]),t("td",[s._v("si Select está cargando datos del servidor")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("loading-text")]),t("td",[s._v("texto mostrado durante la carga de datos del servidor")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Loading")])]),t("tr",[t("td",[s._v("no-match-text")]),t("td",[s._v("texto mostrado cuando ningún dato coincide con la consulta de filtrado.")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("No matching data")])]),t("tr",[t("td",[s._v("no-data-text")]),t("td",[s._v("texto mostrado cuando no hay opciones")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("No data")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase personalizado para el menú desplegable del Select")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("reserve-keyword")]),t("td",[s._v("cuando "),t("code",{pre:!0},[s._v("multiple")]),s._v(" y "),t("code",{pre:!0},[s._v("filter")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v(", si se debe reservar la palabra clave actual después de seleccionar una opción.")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("default-first-option")]),t("td",[s._v("seleccione la primera opción de coincidencia en la tecla enter. Uso con "),t("code",{pre:!0},[s._v("filterable")]),s._v(" o "),t("code",{pre:!0},[s._v("remote")]),s._v(".")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("popper-append-to-body")]),t("td",[s._v("si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este "),t("code",{pre:!0},[s._v("prop")]),s._v(" en "),t("code",{pre:!0},[s._v("false")]),s._v(".")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("true")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos Select")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor del select cambia")]),t("td",[s._v("valor actual del select")])]),t("tr",[t("td",[s._v("visible-change")]),t("td",[s._v("se dispara cuando el menu desplegable aparece o desaparece")]),t("td",[s._v("true cuando aparece, y false en otro caso")])]),t("tr",[t("td",[s._v("remove-tag")]),t("td",[s._v("se dispara cuando un tag es removido en modo multiple")]),t("td",[s._v("el valor del tag removido")])]),t("tr",[t("td",[s._v("clear")]),t("td",[s._v("se dispara cuando el icono se clickea en un Select limpiable")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("se dispara cuando el input pierde el foco")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("se dispara cuando el input obtiene el foco")]),t("td",[s._v("(event: Event)")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-del-grupo-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-del-grupo-de-opciones","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos del grupo de opciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("nombre del grupo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si se deshabilitan todas las opciones del grupo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-opciones","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de opciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value")]),t("td",[s._v("valor de option")]),t("td",[s._v("string/number/object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("etiqueta de option, es igual a "),t("code",{pre:!0},[s._v("value")]),s._v(" si se omite")]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si option esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Metodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("focus")]),t("td",[s._v("Foco en el componente input")]),t("td",[s._v("-")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1451)},function(s,a,t){"use strict";function l(s){t(1452)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1454),n=t.n(e),r=t(1455),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1453);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("558c5884",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-box.demo-slider .source{padding:0}.demo-box.demo-slider .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-box.demo-slider .block:last-child{border-bottom:none}.demo-box.demo-slider .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-box.demo-slider .demonstration+.el-slider{float:right;width:70%;margin-right:20px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42,value6:0,value7:0,value8:0,value9:[4,8],value10:0}},methods:{formatTooltip:function(s){return s/100}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Desliza el slider dentro de un rango fijo.")]),s._m(1),t("p",[s._v("El valor actual se muestra cuando se inicia el arrastre del slider.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value1: 0,\n value2: 50,\n value3: 36,\n value4: 48,\n value5: 42\n }\n },\n methods: {\n formatTooltip(val) {\n return val / 100;\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default value")]),t("el-slider",{model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Customized initial value")]),t("el-slider",{model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Hide Tooltip")]),t("el-slider",{attrs:{"show-tooltip":!1},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Format Tooltip")]),t("el-slider",{attrs:{"format-tooltip":s.formatTooltip},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Disabled")]),t("el-slider",{attrs:{disabled:""},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})],1)]],2),t("p",[s._v("Personalice el valor inicial del slider configurando el valor vinculado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default value"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Customized initial value"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Hide Tooltip"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":show-tooltip")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Format Tooltip"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":format-tooltip")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formatTooltip"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Disabled"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("50")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("36")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("48")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("42")]),s._v("\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n formatTooltip(val) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" val / "),t("span",{attrs:{class:"hljs-number"}},[s._v("100")]),s._v(";\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Las opciones pueden ser discretas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value6: 0,\n value7: 0\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Breakpoints not displayed")]),t("el-slider",{attrs:{step:10},model:{value:s.value6,callback:function(a){s.value6=a},expression:"value6"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Breakpoints displayed")]),t("el-slider",{attrs:{step:10,"show-stops":""},model:{value:s.value7,callback:function(a){s.value7=a},expression:"value7"}})],1)]],2),t("p",[s._v("Configure el tamaño del paso con el atributo "),t("code",[s._v("step")]),s._v(". Puede visualizar los puntos de ruptura configurando el atributo "),t("code",[s._v("show-stops")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints not displayed"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints displayed"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-stops")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Inserte el valor a traves de un input")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value8: 0\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("el-slider",{attrs:{"show-input":""},model:{value:s.value8,callback:function(a){s.value8=a},expression:"value8"}})],1)]],2),t("p",[s._v("Configure el atributo "),t("code",[s._v("show-input")]),s._v(" para que muestre un input a la derecha.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-input")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Se soporta la selección de un rango de valores.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value9: [4, 8]\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(a){s.value9=a},expression:"value9"}})],1)]],2),t("p",[s._v("El ajuste del atributo "),t("code",[s._v("range")]),s._v(" activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("range")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-stops")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": ["),t("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v("]\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value10: 0\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:s.value10,callback:function(a){s.value10=a},expression:"value10"}})],1)]],2),t("p",[s._v("El ajuste del atributo "),t("code",[s._v("vertical")]),s._v(" a "),t("code",[s._v("true")]),s._v(" habilita el modo vertical. En el modo vertical, se requiere el atributo "),t("code",[s._v("height")]),s._v(" .")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("vertical")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"valores-discretos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valores-discretos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Valores discretos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"slider-con-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-con-input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider con input")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"seleccion-de-rangos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-de-rangos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Seleccion de rangos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"modo-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modo-vertical","aria-hidden":"true"}},[s._v("¶")]),s._v(" Modo Vertical")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("min")]),t("td",[s._v("valor minimo")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("valor máximo")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("100")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el Slider esta deshabitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("tamaño del paso")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("1")])]),t("tr",[t("td",[s._v("show-input")]),t("td",[s._v("Si se muestra el input, trabaja cuando"),t("code",{pre:!0},[s._v("range")]),s._v("es false")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-input-controls")]),t("td",[s._v("si se muestran los botones de control cuando"),t("code",{pre:!0},[s._v("show-input")]),s._v("es true")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-stops")]),t("td",[s._v("si se muestran los puntos de ruptura (breakpoints)")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-tooltip")]),t("td",[s._v("si se muestra el valor en un tooltip")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("format-tooltip")]),t("td",[s._v("formato para mostrar el valor del tooltip")]),t("td",[s._v("function(value)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("range")]),t("td",[s._v("si se usaran un rango")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("vertical")]),t("td",[s._v("modo vertical")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("height")]),t("td",[s._v("alto del Slider, requerido en modo vertical")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("etiqueta para screen reader")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("debounce")]),t("td",[s._v("retardo al escribir, en milisegundos, funciona cuando"),t("code",{pre:!0},[s._v("show-input")]),s._v(" es true.")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón)")]),t("td",[s._v("valor despues del cambio")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1457)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1458),e=t.n(l),n=t(1459),r=t(0),v=r(e.a,n.a,!1,null,null,null);a.default=v.exports},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.")]),s._m(1),t("p",[s._v("Barra de pasos simple.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n\nNext step\n\n\n',script:"\n export default {\n data() {\n return {\n active: 0\n };\n },\n\n methods: {\n next() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{active:s.active,"finish-status":"success"}},[t("el-step",{attrs:{title:"Step 1"}}),t("el-step",{attrs:{title:"Step 2"}}),t("el-step",{attrs:{title:"Step 3"}})],1),t("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("Next step")])],1),t("p",[s._v("Defina el atributo "),t("code",[s._v("active")]),s._v(" con un valor de tipo "),t("code",[s._v("Number")]),s._v(", que indica el índice de pasos y comienza desde 0. Puede definir el atributo "),t("code",[s._v("space")]),s._v(" cuando es necesario fijar el ancho del paso que acepta el tipo "),t("code",[s._v("Boolean")]),s._v(". La unidad del atributo "),t("code",[s._v("space")]),s._v(" es px. Si no está configurado, es responsive. La configuración del atributo "),t("code",[s._v("finish-status")]),s._v(" puede cambiar el estado de los pasos completados.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"active"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 12px;"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"next"')]),s._v(">")]),s._v("Next step"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("active")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n };\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n next() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active++ > "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(") "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active = "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Muestra el estado del step para cada paso.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),t("el-step",{attrs:{title:"Processing"}}),t("el-step",{attrs:{title:"Step 3"}})],1)],1),t("p",[s._v("Utilice el atributo "),t("code",[s._v("title")]),s._v(" para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Done"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Processing"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("El título y la descripción pueden estar centrados.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{active:2,"align-center":""}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),t("el-step",{attrs:{title:"Step 3",description:"Some description"}}),t("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("align-center")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puede poner una descripción para cada paso.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("En la barra de pasos se pueden utilizar diversos iconos personalizados.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1),t("p",[s._v("El icono se define mediante la propiedad "),t("code",[s._v("icon")]),s._v(". Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-picture"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Step bar vertical.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n \n \n
    \n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Step 1"}}),t("el-step",{attrs:{title:"Step 2"}}),t("el-step",{attrs:{title:"Step 3"}})],1)],1)]),t("p",[s._v("Sólo tiene que fijar el atributo "),t("code",[s._v("direction")]),s._v(" a "),t("code",[s._v("vertical")]),s._v(" en el elemento "),t("code",[s._v("el-steps")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"height: 300px;"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("direction")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"vertical"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n \n \n \n\n\n\n \n \n \n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{space:200,active:1,simple:""}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),t("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[t("el-step",{attrs:{title:"Step 1"}}),t("el-step",{attrs:{title:"Step 2"}}),t("el-step",{attrs:{title:"Step 3"}})],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("simple")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-picture"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("simple")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" >")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" >")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" >")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"step-bar-con-el-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-el-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar con el status")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centrado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"step-bar-con-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-descripcion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar con descripción")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"step-bar-with-icon"}},[t("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,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"step-bar-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-vertical","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar vertical")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"step-bar-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-simple","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar simple")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Step bar simple, donde se ignorará "),t("code",{pre:!0},[s._v("align-center")]),s._v(", "),t("code",{pre:!0},[s._v("description")]),s._v(", "),t("code",{pre:!0},[s._v("direction")]),s._v(" y "),t("code",{pre:!0},[s._v("space")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"steps-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("space")]),t("td",[s._v("el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje.")]),t("td",[s._v("number / string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("direction")]),t("td",[s._v("dirección de visualización")]),t("td",[s._v("string")]),t("td",[s._v("vertical/horizontal")]),t("td",[s._v("horizontal")])]),t("tr",[t("td",[s._v("active")]),t("td",[s._v("actual paso de activación")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("process-status")]),t("td",[s._v("status del paso actual")]),t("td",[s._v("string")]),t("td",[s._v("wait / process / finish / error / success")]),t("td",[s._v("process")])]),t("tr",[t("td",[s._v("finish-status")]),t("td",[s._v("status del paso final")]),t("td",[s._v("string")]),t("td",[s._v("wait / process / finish / error / success")]),t("td",[s._v("finish")])]),t("tr",[t("td",[s._v("align-center")]),t("td",[s._v("centrado de título y descripción")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("simple")]),t("td",[s._v("si aplicar un tema simple")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"step-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("titulo del paso")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("descripción del paso")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("icon")]),t("td",[s._v("icono del paso")]),t("td",[s._v("nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre")]),t("td",[s._v("string")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("status")]),t("td",[s._v("estado actual. Se configurará automáticamente mediante Steps si no está configurado.")]),t("td",[s._v("wait / process / finish / error / success")]),t("td",[s._v("-")]),t("td")])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Name")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("icon")]),t("td",[s._v("Icono personalizado")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("Titulo del paso")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("Descripcion del paso")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1461)},function(s,a,t){"use strict";function l(s){t(1462)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1464),n=t.n(e),r=t(1465),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1463);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("7c32dcff",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-box.demo-switch .el-switch{margin:20px 20px 20px 0}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{value1:!0,value2:!0,value3:!0,value4:!0,value5:"100",value6:!0,value7:!1}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Switch es utilizdo para realizar cambios entre dos estados opuestos.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-switch",{model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}}),t("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})],1),t("p",[s._v("Enlace "),t("code",[s._v("v-model")]),s._v(" a una variable de tipo "),t("code",[s._v("Boolean")]),s._v(". Los atributos "),t("code",[s._v("active-color")]),s._v(" y "),t("code",[s._v("inactive-color")]),s._v(" deciden el color de fondo en cada estado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value3: true,\n value4: true\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}}),t("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1),t("p",[s._v("Puede agregar los atributos "),t("code",[s._v("active-text")]),s._v(" y "),t("code",[s._v("inactive-text")]),s._v(" para mostrar los textos.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("active-text")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by month"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-text")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by year"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"display: block"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("active-text")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by month"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-text")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by year"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n',script:"\n export default {\n data() {\n return {\n value5: '100'\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tooltip",{attrs:{content:"Switch value: "+s.value5,placement:"top"}},[t("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})],1)],1),t("p",[s._v("Puede establecer los atributos "),t("code",[s._v("active-value")]),s._v(" y "),t("code",[s._v("inactive-value")]),s._v(". Ambos reciben valores de tipo "),t("code",[s._v("Boolean")]),s._v(", "),t("code",[s._v("String")]),s._v(" o "),t("code",[s._v("Number")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"'Switch value: ' + value5\"")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("active-value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'100'")]),s._v("\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value6: true,\n value7: false\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-switch",{attrs:{disabled:""},model:{value:s.value6,callback:function(a){s.value6=a},expression:"value6"}}),t("el-switch",{attrs:{disabled:""},model:{value:s.value7,callback:function(a){s.value7=a},expression:"value7"}})],1),t("p",[s._v("Agregar el atributo "),t("code",[s._v("disabled")]),s._v(" desactiva el componente Switch.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),t("p",[s._v("después de cambiar")]),s._m(9),s._m(10)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"texto-de-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texto-de-descripcion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Texto de descripción")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tipos-de-valores-extendidos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-valores-extendidos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tipos de valores extendidos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si Switch esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("ancho del componente Switch")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("40")])]),t("tr",[t("td",[s._v("active-icon-class")]),t("td",[s._v("nombre de la clase del icono mostrado en el estado "),t("code",{pre:!0},[s._v("on")]),s._v(", sobreescribe "),t("code",{pre:!0},[s._v("active-text")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inactive-icon-class")]),t("td",[s._v("nombre de la clase del icono mostrado en el estado "),t("code",{pre:!0},[s._v("off")]),s._v(", sobreescribe "),t("code",{pre:!0},[s._v("inactive-text")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("active-text")]),t("td",[s._v("texto mostrado en el estado "),t("code",{pre:!0},[s._v("on")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inactive-text")]),t("td",[s._v("texto mostrado en el estado "),t("code",{pre:!0},[s._v("off")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("active-value")]),t("td",[s._v("cambia su valor cuando se encuentra en el estado "),t("code",{pre:!0},[s._v("on")])]),t("td",[s._v("boolean / string / number")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("inactive-value")]),t("td",[s._v("cambia su valor cuando se encuentra en el estado "),t("code",{pre:!0},[s._v("off")])]),t("td",[s._v("boolean / string / number")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("active-color")]),t("td",[s._v("color de fondo cuando se encuentra en el estado "),t("code",{pre:!0},[s._v("on")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#409EFF")])]),t("tr",[t("td",[s._v("inactive-color")]),t("td",[s._v("color de fondo cuando se encuentra en el estado "),t("code",{pre:!0},[s._v("off")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#C0CCDA")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("nombre de entrada del componente Switch")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametro")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor cambia")]),t("td",[s._v("valor")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Metodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametro")])])]),t("tbody",[t("tr",[t("td",[s._v("focus")]),t("td",[s._v("foco al componente Switch")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1467)},function(s,a,t){"use strict";function l(s){t(1468)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1470),n=t.n(e),r=t(1471),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1469);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("0d62a35c",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".el-table .warning-row{background:oldlace}.el-table .success-row{background:#f0f9eb}.demo-table .name-wrapper{display:inline-block}.demo-table .demo-table-expand label{width:90px;color:#99a9bf}.demo-table .demo-table-expand .el-form-item{margin-right:0;margin-bottom:0;width:50%}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}],tableData2:[{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",$info:!0},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",$positive:!0}],tableData3:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData4:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData6:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}],currentRow:null,multipleSelection:[]}},methods:{getSummaries:function(s){var a=s.columns,t=s.data,l=[];return a.forEach(function(s,a){if(0===a)return void(l[a]="Total Cost");var e=t.map(function(a){return Number(a[s.property])});e.every(function(s){return isNaN(s)})?l[a]="N/A":l[a]="$ "+e.reduce(function(s,a){var t=Number(a);return isNaN(t)?s:s+a},0)}),l},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var a=this;s?s.forEach(function(s){a.$refs.multipleTable.toggleRowSelection(s)}):this.$refs.multipleTable.clearSelection()},handleClick:function(){console.log("click")},handleEdit:function(s,a){console.log(s,a)},handleDelete:function(s,a){console.log(s,a)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,a){return s.address},filterTag:function(s,a){return a.tag===s},filterHandler:function(s,a,t){return a[t.property]===s},tableRowClassName:function(s){var a=(s.row,s.rowIndex);return 1===a?"warning-row":3===a?"success-row":""},deleteRow:function(s,a){a.splice(s,1)},arraySpanMethod:function(s){var a=(s.row,s.column,s.rowIndex),t=s.columnIndex;if(a%2==0){if(0===t)return[1,2];if(1===t)return[0,0]}},objectSpanMethod:function(s){var a=(s.row,s.column,s.rowIndex);if(0===s.columnIndex)return a%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}},indexMethod:function(s){return 2*s}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Visualiza múltiples datos con un formato en particular. Podrá ordenar, filtrar y comparar datos en una tabla.")]),s._m(1),t("p",[s._v("La tabla básica es solo para mostrar datos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:' \n\n \n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Después de haber establecido el atributo "),t("code",[s._v("data")]),s._v(" de "),t("code",[s._v("el-table")]),s._v(" con un arreglo de objetos, puede usar la propiedad "),t("code",[s._v("prop")]),s._v(" (el correspondiente a la clave de un objeto dentro del arreglo "),t("code",[s._v("data")]),s._v(") en "),t("code",[s._v("el-table-column")]),s._v(" para insertar datos a las columnas de la tabla, y establecer el atributo "),t("code",[s._v("label")]),s._v(" para definir el nombre de la columna. También puede usar el atributo "),t("code",[s._v("width")]),s._v(" para establecer el ancho de las columnas.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[s._v(" "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n ")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("La tabla con franjas hace más fácil distinguir filas diferentes.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("El atributo "),t("code",[s._v("stripe")]),s._v(" también acepta un "),t("code",[s._v("Boolean")]),s._v(". Si se encuentra "),t("code",[s._v("true")]),s._v(", la tabla será con franjas.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("stripe")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Por defecto, la tabla no tiene bordes verticales. Si lo necesita, puede establecer el atributo "),t("code",[s._v("border")]),s._v(" a "),t("code",[s._v("true")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v('Puede destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados.')]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n methods: {\n tableRowClassName({row, rowIndex}) {\n if (rowIndex === 1) {\n return 'warning-row';\n } else if (rowIndex === 3) {\n return 'success-row';\n }\n return '';\n }\n },\n data() {\n return {\n tableData2: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:"\n .el-table .warning-row {\n background: oldlace;\n }\n\n .el-table .success-row {\n background: #f0f9eb;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Utilice "),t("code",[s._v("row-class-name")]),s._v(" en "),t("code",[s._v("el-table")]),s._v(" para agregar clases personalizadas a una fila en específico. Y entonces, podrá darle diseño con estas clases.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":row-class-name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-table")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".warning-row")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": oldlace;\n }\n\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-table")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".success-row")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#f0f9eb")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n tableRowClassName({row, rowIndex}) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex === "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'warning-row'")]),s._v(";\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex === "),t("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success-row'")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n }\n },\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData2")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Cuando esta tiene demasiadas filas, puede utilizar una cabecera fija.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250"}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Al configurar el atributo "),t("code",[s._v("height")]),s._v(" de "),t("code",[s._v("el-table")]),s._v(", puede fijar la cabecera de la tabla sin agregar otro código.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Cuando se tienen demasiadas columnas, puede fijar alguna de estas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),t("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("Detalle")]),t("el-button",{attrs:{type:"text",size:"small"}},[s._v("Editar")])]}}])})],1)]],2),t("p",[s._v("El atributo "),t("code",[s._v("fixed")]),s._v(" es utilizado en "),t("code",[s._v("el-table-column")]),s._v(", este acepta un "),t("code",[s._v("Boolean")]),s._v(". Si es "),t("code",[s._v("true")]),s._v(", la columna será fijada a la izquierda. También acepta dos tipos: "),t("code",[s._v("left")]),s._v(" y "),t("code",[s._v("right")]),s._v(", ambos indican donde debe ser fijada la columna.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Estado"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Ciudad"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Código postal"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Operaciones"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Detalle"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Editar"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick() {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(");\n }\n },\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }]\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: '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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)]],2),t("p",[s._v("Fije las columnas y cabecera al mismo tiempo combinando los dos ejemplos anteriores.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Estado"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Ciudad"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Código postal"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Cuando los datos se modifican dinámicamente, es posible que necesite que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n deleteRow(index, rows) {\n rows.splice(index, 1);\n }\n },\n data() {\n return {\n tableData4: [{\n date: '2016-05-03',\n name: '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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,"max-height":"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),t("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(t){t.preventDefault(),s.deleteRow(a.$index,s.tableData4)}}},[s._v("\n Eliminar\n ")])]}}])})],1)]],2),t("p",[s._v("Al configurar el atributo "),t("code",[s._v("max-height")]),s._v(" de "),t("code",[s._v("el-table")]),s._v(", tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("max-height")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Estado"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Ciudad"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Código postal"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Operaciones"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click.native.prevent")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n Eliminar\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n deleteRow(index, rows) {\n rows.splice(index, "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n }\n },\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData4")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),t("p",[s._v("Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agrupadas para mostrar datos por jerarquía.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: '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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"150"}}),t("el-table-column",{attrs:{label:"Información de entrega"}},[t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{label:"Información de dirección"}},[t("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)],1)],1)]],2),t("p",[s._v("Solo necesitas colocar "),t("code",[s._v("el-table-column")]),s._v(" dentro de un "),t("code",[s._v("el-table-column")]),s._v(", de esta forma lograrás agruparlas.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Información de entrega"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Información de dirección"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Estado"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Ciudad"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Código postal"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),t("p",[s._v("La selección de una fila esta soportada.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[t("el-table-column",{attrs:{type:"index",width:"50"}}),t("el-table-column",{attrs:{property:"date",label:"Fecha",width:"120"}}),t("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{property:"address",label:"Dirección"}})],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-button",{on:{click:function(a){s.setCurrent(s.tableData[1])}}},[s._v("Seleccionar segunda fila")]),t("el-button",{on:{click:function(a){s.setCurrent()}}},[s._v("Limpiar selección")])],1)]],2),t("p",[s._v("La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo "),t("code",[s._v("highlight-current-row")]),s._v(". Un evento llamado "),t("code",[s._v("current-change")]),s._v(" será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: "),t("code",[s._v("currentRow")]),s._v(" y "),t("code",[s._v("oldCurrentRow")]),s._v(". Si necesita mostrar el índice de la fila, puede agregar un nuevo "),t("code",[s._v("el-table-column")]),s._v(" con el atributo "),t("code",[s._v("type")]),s._v(" asignado al "),t("code",[s._v("index")]),s._v(" y podrá ver el índice iniciando desde 1.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"singleTable"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("highlight-current-row")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"setCurrent(tableData[1])"')]),s._v(">")]),s._v("Seleccionar segunda fila"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"setCurrent()"')]),s._v(">")]),s._v("Limpiar selección"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("currentRow")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n setCurrent(row) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.singleTable.setCurrentRow(row);\n },\n handleCurrentChange(val) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".currentRow = val;\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),t("p",[s._v("También puede seleccionar múltiples filas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n multipleSelection: []\n }\n },\n\n methods: {\n toggleSelection(rows) {\n if (rows) {\n rows.forEach(row => {\n this.$refs.multipleTable.toggleRowSelection(row);\n });\n } else {\n this.$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n this.multipleSelection = val;\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3},on:{"selection-change":s.handleSelectionChange}},[t("el-table-column",{attrs:{type:"selection",width:"55"}}),t("el-table-column",{attrs:{label:"Fecha",width:"120"},scopedSlots:s._u([{key:"default",fn:function(a){return[s._v(s._s(a.row.date))]}}])}),t("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{property:"address",label:"Dirección","show-overflow-tooltip":""}})],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-button",{on:{click:function(a){s.toggleSelection([s.tableData3[1],s.tableData3[2]])}}},[s._v("Cambia el estado de selección de la segunda y tercera fila.")]),t("el-button",{on:{click:function(a){s.toggleSelection()}}},[s._v("Limpiar selección")])],1)]],2),t("p",[s._v("Activar la selección múltiple es sencillo: Solo debe agregar a "),t("code",[s._v("el-table-column")]),s._v(" con su "),t("code",[s._v("type")]),s._v(" establecido en "),t("code",[s._v("selection")]),s._v(". Además de la selección múltiple, este ejemplo también utiliza "),t("code",[s._v("show-overflow-tooltip")]),s._v(": por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que busca es mantener una línea, utilice el atributo "),t("code",[s._v("show-overflow-tooltip")]),s._v(", que acepta un valor "),t("code",[s._v("Boolean")]),s._v(". Cuando este está establecido en "),t("code",[s._v("true")]),s._v(", el contenido extra puede mostrar un "),t("em",[s._v("tooltip")]),s._v(" cuando se hace "),t("em",[s._v("hover")]),s._v(" sobre la celda.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"multipleTable"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@selection-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selection"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"55"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("{{ scope.row.date }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"toggleSelection([tableData3[1], tableData3[2]])"')]),s._v(">")]),s._v("Cambia el estado de selección de la segunda y tercera fila."),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"toggleSelection()"')]),s._v(">")]),s._v("Limpiar selección"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("multipleSelection")]),s._v(": []\n }\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n toggleSelection(rows) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rows) {\n rows.forEach("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("row")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.multipleTable.toggleRowSelection(row);\n });\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".multipleSelection = val;\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),t("p",[s._v("Ordena los datos para encontrar o comparar información rápidamente.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,"default-sort":{prop:"date",order:"descending"}}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:s.formatter}})],1)]],2),t("p",[s._v("Establezca el atributo "),t("code",[s._v("sortable")]),s._v(" para ordenar los datos de una columna. Este acepta un "),t("code",[s._v("Boolean")]),s._v(" con un valor por defecto "),t("code",[s._v("false")]),s._v(". Establezca el atributo "),t("code",[s._v("default-sort")]),s._v(" para determinar la columna y orden por defecto. Para aplicar sus propias reglas de ordenamiento, utilice "),t("code",[s._v("sort-method")]),s._v(" o "),t("code",[s._v("sort-by")]),s._v(". Si lo que necesita es ordenar de forma remota desde backend, establezca "),t("code",[s._v("sortable")]),s._v(" a "),t("code",[s._v("custom")]),s._v(", y escuche el evento "),t("code",[s._v("sort-change")]),s._v(" de la tabla. Al dispararse el evento, tendrá acceso a la columna ordenada y orden para que pueda obtener los datos de la tabla ordenada desde su API. En este ejemplo utilizamos otro atributo llamado "),t("code",[s._v("formatter")]),s._v(" para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: "),t("code",[s._v("row")]),s._v(" y "),t("code",[s._v("column")]),s._v(". Puede disparar este de acuerdo a sus propias necesidades.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":default-sort")]),s._v(" = "),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":formatter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.address;\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(13),t("p",[s._v("Filtra la tabla para encontrar la información que necesita.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n },\n filterTag(value, row) {\n return row.tag === value;\n },\n filterHandler(value, row, column) {\n const property = column['property'];\n return row[property] === value;\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":s.filterHandler}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:s.formatter}}),t("el-table-column",{attrs:{prop:"tag",label:"Etiqueta",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":s.filterTag,"filter-placement":"bottom-end"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("el-tag",{attrs:{type:"Home"===a.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(a.row.tag))])]}}])})],1)]],2),t("p",[s._v("Establezca el atributo "),t("code",[s._v("filters")]),s._v(" y "),t("code",[s._v("filter-method")]),s._v(" en "),t("code",[s._v("el-table-column")]),s._v(" haciendo esta columna filtrable. "),t("code",[s._v("filters")]),s._v(" es un arreglo, y "),t("code",[s._v("filter-method")]),s._v(" es una función que decide que filas se muestra. Esta tiene tres parámetros: "),t("code",[s._v("value")]),s._v(", "),t("code",[s._v("row")]),s._v(" y "),t("code",[s._v("column")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":filters")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"filterHandler"')]),s._v("\n >")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":formatter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tag"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Etiqueta"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":filters")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"filterTag"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("filter-placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"scope.row.tag === 'Home' ? 'primary' : 'success'\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("close-transition")]),s._v(">")]),s._v("{{scope.row.tag}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }]\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.address;\n },\n filterTag(value, row) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.tag === value;\n },\n filterHandler(value, row, column) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" property = column["),t("span",{attrs:{class:"hljs-string"}},[s._v("'property'")]),s._v("];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row[property] === value;\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(14),t("p",[s._v("Personalice la columna de la tabla para que pueda integrarse con otros componentes.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{label:"Fecha",width:"180"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("i",{staticClass:"el-icon-time"}),t("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(a.row.date))])]}}])}),t("el-table-column",{attrs:{label:"Nombre",width:"180"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("el-popover",{attrs:{trigger:"hover",placement:"top"}},[t("p",[s._v("Name: "+s._s(a.row.name))]),t("p",[s._v("Addr: "+s._s(a.row.address))]),t("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[t("el-tag",{attrs:{size:"medium"}},[s._v(s._s(a.row.name))])],1)])]}}])}),t("el-table-column",{attrs:{label:"Operaciones"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("el-button",{attrs:{size:"mini"},on:{click:function(t){s.handleEdit(a.$index,a.row)}}},[s._v("Editar")]),t("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(t){s.handleDelete(a.$index,a.row)}}},[s._v("Eliminar")])]}}])})],1)]],2),t("p",[s._v("Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por "),t("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slots")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-time"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-left: 10px"')]),s._v(">")]),s._v("{{ scope.row.date }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Name: {{ scope.row.name }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Addr: {{ scope.row.address }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("{{ scope.row.name }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Operaciones"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("Editar"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("Eliminar"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleEdit(index, row) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n },\n handleDelete(index, row) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(15),t("p",[s._v("Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: '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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[t("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("p",[s._v("Estado: "+s._s(a.row.state))]),t("p",[s._v("Ciudad: "+s._s(a.row.city))]),t("p",[s._v("Dirección: "+s._s(a.row.address))]),t("p",[s._v("Código postal: "+s._s(a.row.zip))])]}}])}),t("el-table-column",{attrs:{label:"Fecha",prop:"date"}}),t("el-table-column",{attrs:{label:"Nombre",prop:"name"}})],1)]],2),t("p",[s._v("Puede activar la fila expandible estableciendo la propiedad "),t("code",[s._v("type")]),s._v(" a "),t("code",[s._v("expand")]),s._v(" y Scoped Slots. La plantilla para "),t("code",[s._v("el-table-column")]),s._v(" se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando "),t("code",[s._v("Scoped Slots")]),s._v(" en plantillas de columna personalizadas.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"expand"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Estado: {{ props.row.state }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Ciudad: {{ props.row.city }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Dirección: {{ props.row.address }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Código postal: {{ props.row.zip }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(16),t("p",[s._v("Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData6: [{\n id: '12987122',\n name: 'Tom',\n amount1: '234',\n amount2: '3.2',\n amount3: 10\n }, {\n id: '12987123',\n name: 'Tom',\n amount1: '165',\n amount2: '4.43',\n amount3: 12\n }, {\n id: '12987124',\n name: 'Tom',\n amount1: '324',\n amount2: '1.9',\n amount3: 9\n }, {\n id: '12987125',\n name: 'Tom',\n amount1: '621',\n amount2: '2.2',\n amount3: 17\n }, {\n id: '12987126',\n name: 'Tom',\n amount1: '539',\n amount2: '4.1',\n amount3: 15\n }]\n };\n },\n methods: {\n getSummaries(param) {\n const { columns, data } = param;\n const sums = [];\n columns.forEach((column, index) => {\n if (index === 0) {\n sums[index] = 'Costo total';\n return;\n }\n const values = data.map(item => Number(item[column.property]));\n if (!values.every(value => isNaN(value))) {\n sums[index] = '$ ' + values.reduce((prev, curr) => {\n const value = Number(curr);\n if (!isNaN(value)) {\n return prev + curr;\n } else {\n return prev;\n }\n }, 0);\n } else {\n sums[index] = 'N/A';\n }\n });\n\n return sums;\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[t("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),t("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),t("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),t("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),t("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[t("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),t("el-table-column",{attrs:{prop:"amount1",label:"Costo 1 ($)"}}),t("el-table-column",{attrs:{prop:"amount2",label:"Costo 2 ($)"}}),t("el-table-column",{attrs:{prop:"amount3",label:"Costo 3 ($)"}})],1)]],2),t("p",[s._v("Puede agregar la fila de resumen configurando "),t("code",[s._v("show-summary")]),s._v(" a "),t("code",[s._v("true")]),s._v(". Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puede configurar el texto mostrado usando "),t("code",[s._v("sum-text")]),s._v("), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puede definir su propio comportamiento de suma. Para hacerlo, utiliza un método "),t("code",[s._v("summary-method")]),s._v(", que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-summary")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Monto 1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Monto 2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Monto 3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":summary-method")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"getSummaries"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-summary")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Costo 1 ($)"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Costo 2 ($)"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Costo 3 ($)"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData6")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'12987122'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'234'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'3.2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'12987123'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'165'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'4.43'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("12")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'12987124'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'324'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1.9'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'12987125'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'621'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2.2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("17")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'12987126'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'539'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'4.1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("\n }]\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n getSummaries(param) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" { columns, data } = param;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" sums = [];\n columns.forEach("),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("column, index")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n sums[index] = "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Costo total'")]),s._v(";\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" values = data.map("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v("(item[column.property]));\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!values.every("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("value")]),s._v(" =>")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("isNaN")]),s._v("(value))) {\n sums[index] = "),t("span",{attrs:{class:"hljs-string"}},[s._v("'$ '")]),s._v(" + values.reduce("),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("prev, curr")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" value = "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v("(curr);\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),t("span",{attrs:{class:"hljs-built_in"}},[s._v("isNaN")]),s._v("(value)) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" prev + curr;\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" prev;\n }\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n sums[index] = "),t("span",{attrs:{class:"hljs-string"}},[s._v("'N/A'")]),s._v(";\n }\n });\n\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" sums;\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(17),s._m(18),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData6: [{\n id: '12987122',\n name: 'Tom',\n amount1: '234',\n amount2: '3.2',\n amount3: 10\n }, {\n id: '12987123',\n name: 'Tom',\n amount1: '165',\n amount2: '4.43',\n amount3: 12\n }, {\n id: '12987124',\n name: 'Tom',\n amount1: '324',\n amount2: '1.9',\n amount3: 9\n }, {\n id: '12987125',\n name: 'Tom',\n amount1: '621',\n amount2: '2.2',\n amount3: 17\n }, {\n id: '12987126',\n name: 'Tom',\n amount1: '539',\n amount2: '4.1',\n amount3: 15\n }]\n };\n },\n methods: {\n arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n if (rowIndex % 2 === 0) {\n if (columnIndex === 0) {\n return [1, 2];\n } else if (columnIndex === 1) {\n return [0, 0];\n }\n }\n },\n\n objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n if (columnIndex === 0) {\n if (rowIndex % 2 === 0) {\n return {\n rowspan: 2,\n colspan: 1\n };\n } else {\n return {\n rowspan: 0,\n colspan: 0\n };\n }\n }\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,"span-method":s.arraySpanMethod,border:""}},[t("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),t("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),t("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),t("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),t("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,"span-method":s.objectSpanMethod,border:""}},[t("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),t("el-table-column",{attrs:{prop:"amount1",label:"Monto 1"}}),t("el-table-column",{attrs:{prop:"amount2",label:"Monto 2"}}),t("el-table-column",{attrs:{prop:"amount3",label:"Monto 3"}})],1)],1)]],2),t("p",[s._v("Utilice el atributo "),t("code",[s._v("span-method")]),s._v(" para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual "),t("code",[s._v("row")]),s._v(", columna actual "),t("code",[s._v("column")]),s._v(", índice de fila actual "),t("code",[s._v("rowIndex")]),s._v(" y índice de columna actual "),t("code",[s._v("columnIndex")]),s._v(". El método debe devolver un arreglo de dos números, el primer número siendo "),t("code",[s._v("rowspan")]),s._v(" y el segundo "),t("code",[s._v("colspan")]),s._v(". También puede devolver un objeto con las propiedades "),t("code",[s._v("rowspan")]),s._v(" y "),t("code",[s._v("colspan")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span-method")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"arraySpanMethod"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Monto 1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Monto 2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Monto 3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span-method")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"objectSpanMethod"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Monto 1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Monto 2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Monto 3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData6")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'12987122'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'234'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'3.2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'12987123'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'165'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'4.43'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("12")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'12987124'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'324'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1.9'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'12987125'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'621'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2.2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("17")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'12987126'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'539'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'4.1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("\n }]\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex % "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(" === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" ["),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("];\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" ["),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("];\n }\n }\n },\n\n objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex % "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(" === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("rowspan")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("colspan")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("rowspan")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("colspan")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n };\n }\n }\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(19),s._m(20),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '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 methods: {\n indexMethod(index) {\n return index * 2;\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{type:"index",index:s.indexMethod}}),t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Para personalizar el índice de la fila, utilice el atributo "),t("code",[s._v("index")]),s._v(" en "),t("code",[s._v("")]),s._v(" con "),t("code",[s._v("type=index")]),s._v(". Si este es asignado a un número, todos los índices tendrán un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puede ser mostrado como índice.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":index")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"indexMethod"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }],\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n indexMethod(index) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" index * "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(";\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26),s._m(27),s._m(28),s._m(29),s._m(30)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"tablas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tablas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tablas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tabla-basica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-basica","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabla básica")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tabla-con-franjas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-franjas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabla con franjas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tabla-con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-bordes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabla con bordes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tabla-con-estados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-estados","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabla con estados")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tabla-con-cabecera-fija"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-cabecera-fija","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabla con cabecera fija")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tabla-con-columnas-fijas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-fijas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabla con columnas fijas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tabla-con-columnas-y-cabecera-fija"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-y-cabecera-fija","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabla con columnas y cabecera fija.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"altura-fluido-de-tabla-con-cabecera-fija-y-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#altura-fluido-de-tabla-con-cabecera-fija-y-columnas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Altura fluido de tabla con cabecera fija (y columnas)")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"agrupando-cabeceras-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agrupando-cabeceras-de-la-tabla","aria-hidden":"true"}},[s._v("¶")]),s._v(" Agrupando cabeceras de la tabla")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"seleccion-unica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-unica","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selección única")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"seleccion-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selección multiple")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ordenamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ordenamiento","aria-hidden":"true"}},[s._v("¶")]),s._v(" Ordenamiento")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"filtros"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtros","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filtros")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"plantilla-de-columna-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plantilla-de-columna-personalizada","aria-hidden":"true"}},[s._v("¶")]),s._v(" Plantilla de columna personalizada")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"fila-expandible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fila-expandible","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fila expandible")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"fila-de-resumen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fila-de-resumen","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fila de resumen")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"fusion-de-filas-y-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fusion-de-filas-y-columnas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fusión de filas y columnas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Configurar "),t("em",[s._v("rowspan")]),s._v(" y "),t("em",[s._v("colspan")]),s._v(" le permite fusionar celdas.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"indice-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indice-personalizado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Índice personalizado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Puede personalizar el índice de la fila con la propiedad "),t("code",{pre:!0},[s._v("type=index")]),s._v(" de las columnas.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-la-tabla","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de la tabla")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("data")]),t("td",[s._v("Datos de la tabla")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("height")]),t("td",[s._v("Altura de la tabla. Por defecto esta tiene un tamaño "),t("code",{pre:!0},[s._v("auto")]),s._v(". Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos.")]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("max-height")]),t("td",[s._v("Altura máxima de la tabla. La altura de la tabla comienza desde "),t("code",{pre:!0},[s._v("auto")]),s._v(" hasta que alcanza la altura máxima. El "),t("code",{pre:!0},[s._v("max-height")]),s._v(" es medido en pixeles, lo mismo que "),t("code",{pre:!0},[s._v("height")])]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("stripe")]),t("td",[s._v("especifica si la tabla será en franjas")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("border")]),t("td",[s._v("especifica si la tabla tiene bordes verticales")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño de la tabla")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("fit")]),t("td",[s._v("especifica si el ancho de la columna se adapta automáticamente a su contenedor")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-header")]),t("td",[s._v("especifica si la cabecera de la tabla es visible")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("highlight-current-row")]),t("td",[s._v("especifica si la fila actual es resaltado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("current-row-key")]),t("td",[s._v("clave de la fila actual, un ajuste de propiedad única")]),t("td",[s._v("string,number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("row-class-name")]),t("td",[s._v("función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila")]),t("td",[s._v("Function({row, rowIndex})/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("row-style")]),t("td",[s._v("función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila")]),t("td",[s._v("Function({row, rowIndex})/Object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("cell-class-name")]),t("td",[s._v("función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda")]),t("td",[s._v("Function({row, column, rowIndex, columnIndex})/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("cell-style")]),t("td",[s._v("función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda")]),t("td",[s._v("Function({row, column, rowIndex, columnIndex})/Object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("header-row-class-name")]),t("td",[s._v("función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla")]),t("td",[s._v("Function({row, rowIndex})/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("header-row-style")]),t("td",[s._v("función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla")]),t("td",[s._v("Function({row, rowIndex})/Object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("header-cell-class-name")]),t("td",[s._v("función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla")]),t("td",[s._v("Function({row, rowIndex})/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("header-cell-style")]),t("td",[s._v("función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla")]),t("td",[s._v("Function({row, rowIndex})/Object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("row-key")]),t("td",[s._v("clave de datos de la fila, utilizada para optimizar la representación de los datos. Es obligatorio "),t("code",{pre:!0},[s._v("reserve-selection")]),s._v(" esta habilitado. Cuando su tipo es string, se permite el acceso multinivel, por ejemplo, "),t("code",{pre:!0},[s._v("user.info.id")]),s._v(", pero "),t("code",{pre:!0},[s._v("user.info[0].id")]),s._v(" no es permitido, en cuyo caso se debe usar una "),t("code",{pre:!0},[s._v("function")])]),t("td",[s._v("Function(row)/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("empty-text")]),t("td",[s._v("Texto mostrado cuando no existen datos. Puede personalizar esta área con "),t("code",{pre:!0},[s._v('slot="empty"')])]),t("td",[s._v("String")]),t("td",[s._v("—")]),t("td",[s._v("No Data")])]),t("tr",[t("td",[s._v("default-expand-all")]),t("td",[s._v("especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna "),t("code",{pre:!0},[s._v('type="expand"')])]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("expand-row-keys")]),t("td",[s._v("establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer "),t("code",{pre:!0},[s._v("row-key")]),s._v(" antes de usar esta propiedad")]),t("td",[s._v("Array")]),t("td",[s._v("—")]),t("td")]),t("tr",[t("td",[s._v("default-sort")]),t("td",[s._v("establece la columna y orden por defecto. La propiedad "),t("code",{pre:!0},[s._v("prop")]),s._v(" es utilizada para establecer la columna de ordenamiento por defecto, la propiedad "),t("code",{pre:!0},[s._v("order")]),s._v(" es utilizada para definir el tipo de orden por defecto")]),t("td",[s._v("Object")]),t("td",[t("code",{pre:!0},[s._v("order")]),s._v(": ascending, descending")]),t("td",[s._v("if "),t("code",{pre:!0},[s._v("prop")]),s._v(" is set, and "),t("code",{pre:!0},[s._v("order")]),s._v(" is not set, then "),t("code",{pre:!0},[s._v("order")]),s._v(" is default to ascending")])]),t("tr",[t("td",[s._v("tooltip-effect")]),t("td",[s._v("propiedad "),t("code",{pre:!0},[s._v("effect")]),s._v(" para efectos en tooltip")]),t("td",[s._v("String")]),t("td",[s._v("dark/light")]),t("td")]),t("tr",[t("td",[s._v("show-summary")]),t("td",[s._v("especifica si debe mostrar la fila de resumen")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("sum-text")]),t("td",[s._v("texto a mostrar para la primer columna de la fila de resumen")]),t("td",[s._v("String")]),t("td",[s._v("—")]),t("td",[s._v("Sum")])]),t("tr",[t("td",[s._v("summary-method")]),t("td",[s._v("método personalizado para resumen")]),t("td",[s._v("Function({ columns, data })")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("span-method")]),t("td",[s._v("método que devuelve "),t("em",[s._v("rowspan")]),s._v(" y "),t("em",[s._v("colspan")])]),t("td",[s._v("Function({ row, column, rowIndex, columnIndex })")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-la-tabla","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos de la tabla")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("select")]),t("td",[s._v("se dispara cuando el usuario hace clic al "),t("em",[s._v("checkbox")]),s._v(" (caja de selección) en una fila")]),t("td",[s._v("selection, row")])]),t("tr",[t("td",[s._v("select-all")]),t("td",[s._v("se dispara cando el usuario hace clic al "),t("em",[s._v("checkbox")]),s._v(" (caja de selección) en una cabecera de la tabla")]),t("td",[s._v("selection")])]),t("tr",[t("td",[s._v("selection-change")]),t("td",[s._v("se dispara cuando selección cambia")]),t("td",[s._v("selection")])]),t("tr",[t("td",[s._v("cell-mouse-enter")]),t("td",[s._v("se dispara cuando se desplaza dentro de una celda")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("cell-mouse-leave")]),t("td",[s._v("se dispara cuando se desplaza fuera de una celda")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("cell-click")]),t("td",[s._v("se dispara cuando se hace clic en una celda")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("cell-dblclick")]),t("td",[s._v("se dispara cuando se hace doble clic en una celda")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("row-click")]),t("td",[s._v("se dispara cuando se hace clic en una fila")]),t("td",[s._v("row, event, column")])]),t("tr",[t("td",[s._v("row-contextmenu")]),t("td",[s._v("se dispara cuando el usuario hace clic derecho en una fila")]),t("td",[s._v("row, event")])]),t("tr",[t("td",[s._v("row-dblclick")]),t("td",[s._v("se dispara cuando se hace doble clic en una fila")]),t("td",[s._v("row, event")])]),t("tr",[t("td",[s._v("header-click")]),t("td",[s._v("se dispara cuando se hace click en una cabecera de columna")]),t("td",[s._v("column, event")])]),t("tr",[t("td",[s._v("header-contextmenu")]),t("td",[s._v("se dispara cuando el usuario hace clic derecho en una cabecera de columna")]),t("td",[s._v("column, event")])]),t("tr",[t("td",[s._v("sort-change")]),t("td",[s._v("se dispara cuando el ordenamiento de la tabla cambia")]),t("td",[s._v("{ column, prop, order }")])]),t("tr",[t("td",[s._v("filter-change")]),t("td",[s._v("clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada")]),t("td",[s._v("filters")])]),t("tr",[t("td",[s._v("current-change")]),t("td",[s._v("se dispara cuando la fila actual cambia")]),t("td",[s._v("currentRow, oldCurrentRow")])]),t("tr",[t("td",[s._v("header-dragend")]),t("td",[s._v("se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera.")]),t("td",[s._v("newWidth, oldWidth, column, event")])]),t("tr",[t("td",[s._v("expand-change")]),t("td",[s._v("se dispara cuando el usuario expande o colapsa una fila")]),t("td",[s._v("row, expandedRows")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-la-tabla","aria-hidden":"true"}},[s._v("¶")]),s._v(" Métodos de la tabla")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("clearSelection")]),t("td",[s._v("utilizado en selección múltiple de la tabla, limpiar selección, puede ser poco útil cuando "),t("code",{pre:!0},[s._v("reserve-selection")]),s._v(" está habilitado")]),t("td",[s._v("selection")])]),t("tr",[t("td",[s._v("toggleRowSelection")]),t("td",[s._v("utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada")]),t("td",[s._v("row, selected")])]),t("tr",[t("td",[s._v("toggleRowExpansion")]),t("td",[s._v("utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada")]),t("td",[s._v("row, expanded")])]),t("tr",[t("td",[s._v("setCurrentRow")]),t("td",[s._v("utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección")]),t("td",[s._v("row")])]),t("tr",[t("td",[s._v("clearSort")]),t("td",[s._v("limpiar ordenamiento, restaurar datos a orden original")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("clearFilter")]),t("td",[s._v("limpiar filtros")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"slots-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-la-tabla","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slots de la tabla")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")])])]),t("tbody",[t("tr",[t("td",[s._v("append")]),t("td",[s._v("El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar "),t("em",[s._v("scroll")]),s._v(" infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno.")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-para-las-columnas-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-para-las-columnas-de-la-tabla","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos para las columnas de la tabla")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de la columna. Si se establece a "),t("code",{pre:!0},[s._v("selection")]),s._v(", la columna puede mostrar un "),t("em",[s._v("checkbox")]),s._v(". Si se establece a "),t("code",{pre:!0},[s._v("index")]),s._v(", la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a "),t("code",{pre:!0},[s._v("expand")]),s._v(", la columna puede mostrar un ícono para expandir.")]),t("td",[s._v("string")]),t("td",[s._v("selection/index/expand")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("index")]),t("td",[s._v("personalice los índices para cada fila, funciona en columnas con "),t("code",{pre:!0},[s._v("type=index")])]),t("td",[s._v("string, Function(index)")]),t("td",[s._v("-")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("etiqueta de la columna")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("column-key")]),t("td",[s._v("clave de la columna. Si necesita utilizar el evento "),t("code",{pre:!0},[s._v("filter-change")]),s._v(", necesita el atributo para identificar cual columna está siendo filtrada")]),t("td",[s._v("string")]),t("td",[s._v("string")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("prop")]),t("td",[s._v("nombre del campo. También puede usar su alias: "),t("code",{pre:!0},[s._v("property")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("ancho de la columna")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("min-width")]),t("td",[s._v("ancho mínimo de la columna. Columnas con "),t("code",{pre:!0},[s._v("width")]),s._v(" tienen un ancho fijo, mientras que las columnas con "),t("code",{pre:!0},[s._v("min-width")]),s._v(" tienen un ancho que se distribuye en proporción.")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("fixed")]),t("td",[s._v("especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("string/boolean")]),t("td",[s._v("true/left/right")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("render-header")]),t("td",[s._v("Función de renderizado para la cabecera de la tabla de esta columna")]),t("td",[s._v("Function(h, { column, $index })")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("sortable")]),t("td",[s._v("especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo "),t("code",{pre:!0},[s._v("custom")]),s._v(" y escucha al evento de tabla "),t("code",{pre:!0},[s._v("sort-change")])]),t("td",[s._v("boolean, string")]),t("td",[s._v("true, false, custom")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("sort-method")]),t("td",[s._v("método de ordenamiento, funciona cuando "),t("code",{pre:!0},[s._v("sortable")]),s._v(" está en "),t("code",{pre:!0},[s._v("true")]),s._v(". Debería devolver un número, al igual que Array.sort")]),t("td",[s._v("Function(a, b)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("sort-by")]),t("td",[s._v("especifica por cual propiedad de va a ordenar, funciona cuando "),t("code",{pre:!0},[s._v("sortable")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v(" y "),t("code",{pre:!0},[s._v("sort-method")]),s._v(" es "),t("code",{pre:!0},[s._v("undefined")]),s._v(". Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual")]),t("td",[s._v("Function(row, index)/String/Array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("resizable")]),t("td",[s._v("especifica si el ancho de la columna puede ser redimensionado, funciona cuando "),t("code",{pre:!0},[s._v("border")]),s._v(" de "),t("code",{pre:!0},[s._v("el-table")]),s._v(" está en "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("formatter")]),t("td",[s._v("función que formatea el contenido de la celda")]),t("td",[s._v("Function(row, column, cellValue)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-overflow-tooltip")]),t("td",[s._v("especifica si el "),t("em",[s._v("tooltip")]),s._v(" debe ocultarse o mostrarse al hacer "),t("em",[s._v("hover")]),s._v(" en la celda")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alineación")]),t("td",[s._v("string")]),t("td",[s._v("left/center/right")]),t("td",[s._v("left")])]),t("tr",[t("td",[s._v("header-align")]),t("td",[s._v("alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior.")]),t("td",[s._v("String")]),t("td",[s._v("left/center/right")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("class-name")]),t("td",[s._v("nombre de clase de la celda en la columna")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label-class-name")]),t("td",[s._v("nombre de clase de la etiqueta de esta columna")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("selectable")]),t("td",[s._v("función que determina si una cierta fila puede ser seleccionada, funciona cuando "),t("code",{pre:!0},[s._v("type")]),s._v(" esta en "),t("code",{pre:!0},[s._v("selection")])]),t("td",[s._v("Function(row, index)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("reserve-selection")]),t("td",[s._v("especifica si se reserva la selección después de actualizar los datos, funciona cuando "),t("code",{pre:!0},[s._v("type")]),s._v(" está en "),t("code",{pre:!0},[s._v("selection")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("filters")]),t("td",[s._v("un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, "),t("code",{pre:!0},[s._v("text")]),s._v(" y "),t("code",{pre:!0},[s._v("value")]),s._v(" son obligatorios")]),t("td",[s._v("Array[{ text, value }]")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filter-placement")]),t("td",[s._v("colocación para el menu desplegable del filtro")]),t("td",[s._v("String")]),t("td",[s._v("same as Tooltip's "),t("code",{pre:!0},[s._v("placement")])]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filter-multiple")]),t("td",[s._v("especifica si el filtrado de datos soporta múltiples opciones")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("filter-method")]),t("td",[s._v("método para filtrado de datos. Si "),t("code",{pre:!0},[s._v("filter-multiple")]),s._v(" está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("Function(value, row, column)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filtered-value")]),t("td",[s._v("el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con "),t("code",{pre:!0},[s._v("render-header")])]),t("td",[s._v("Array")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1473)},function(s,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var l=t(1474),e=t.n(l),n=t(1475),r=t(0),v=r(e.a,n.a,!1,null,null,null);a.default=v.exports},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{activeName:"second",activeName2:"first",editableTabsValue:"2",editableTabsValue2:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2,tabPosition:"top"}},methods:{handleClick:function(s,a){console.log(s,a)},handleTabsEdit:function(s,a){var t=this;if("add"===a){var l=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:l,content:"New Tab content"}),this.editableTabsValue=l}"remove"===a&&function(){var a=t.editableTabs,l=t.editableTabsValue;l===s&&a.forEach(function(t,e){if(t.name===s){var n=a[e+1]||a[e-1];n&&(l=n.name)}}),t.editableTabsValue=l,t.editableTabs=a.filter(function(a){return a.name!==s})}()},addTab:function(s){var a=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:a,content:"New Tab content"}),this.editableTabsValue2=a},removeTab:function(s){var a=this.editableTabs2,t=this.editableTabsValue2;t===s&&a.forEach(function(l,e){if(l.name===s){var n=a[e+1]||a[e-1];n&&(t=n.name)}}),this.editableTabsValue2=t,this.editableTabs2=a.filter(function(a){return a.name!==s})}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.")]),s._m(1),t("p",[s._v("Tabulación básica y concisa")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n activeName: 'first'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(a){s.activeName=a},expression:"activeName"}},[t("el-tab-pane",{attrs:{label:"User",name:"first"}},[s._v("User")]),t("el-tab-pane",{attrs:{label:"Config",name:"second"}},[s._v("Config")]),t("el-tab-pane",{attrs:{label:"Role",name:"third"}},[s._v("Role")]),t("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[s._v("Task")])],1)]],2),t("p",[s._v("Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de "),t("code",[s._v("value")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"activeName"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@tab-click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"first"')]),s._v(">")]),s._v("User"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"second"')]),s._v(">")]),s._v("Config"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"third"')]),s._v(">")]),s._v("Role"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fourth"')]),s._v(">")]),s._v("Task"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'first'")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Pestañas diseñadas como tarjetas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n activeName: 'first'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick}},[t("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),t("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),t("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),t("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),t("p",[s._v("Establecer "),t("code",[s._v("type")]),s._v(" a "),t("code",[s._v("card")]),s._v(" para obtener una pestaña diseñada como tarjeta.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@tab-click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'first'")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Pestañas de tarjeta con bordes.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n User\n Config\n Role\n Task\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tabs",{attrs:{type:"border-card"}},[t("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),t("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),t("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),t("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),t("p",[s._v("Establecer "),t("code",[s._v("type")]),s._v(" a "),t("code",[s._v("border-card")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n tabPosition: 'top'\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:s.tabPosition,callback:function(a){s.tabPosition=a},expression:"tabPosition"}},[t("el-radio-button",{attrs:{label:"top"}},[s._v("top")]),t("el-radio-button",{attrs:{label:"right"}},[s._v("right")]),t("el-radio-button",{attrs:{label:"bottom"}},[s._v("bottom")]),t("el-radio-button",{attrs:{label:"left"}},[s._v("left")])],1),t("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":s.tabPosition}},[t("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),t("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),t("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),t("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),t("p",[s._v("Es posible escoger entre cuatro direcciones: "),t("code",[s._v('tabPosition="left|right|top|bottom"')])]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tabPosition"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 30px;"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("top"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("right"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("bottom"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("left"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":tab-position")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tabPosition"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"height: 200px;"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tabPosition")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'top'")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Route\n Route\n \n Config\n Role\n Task\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tabs",{attrs:{type:"border-card"}},[t("el-tab-pane",[t("span",{attrs:{slot:"label"},slot:"label"},[t("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n Route\n ")]),t("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),t("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),t("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"label"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v(" Route"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n Route\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Solo las pestañas de tipo tarjeta soportan adición y cierre.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n {{item.content}}\n \n\n\n',script:"\n export default {\n data() {\n return {\n editableTabsValue: '2',\n editableTabs: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n handleTabsEdit(targetName, action) {\n if (action === 'add') {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue = newTabName;\n }\n if (action === 'remove') {\n let tabs = this.editableTabs;\n let activeName = this.editableTabsValue;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue = activeName;\n this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tabs",{attrs:{type:"card",editable:""},on:{edit:s.handleTabsEdit},model:{value:s.editableTabsValue,callback:function(a){s.editableTabsValue=a},expression:"editableTabsValue"}},s._l(s.editableTabs,function(a,l){return t("el-tab-pane",{key:a.name,attrs:{label:a.title,name:a.name}},[s._v("\n "+s._s(a.content)+"\n ")])}))],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"editableTabsValue"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("editable")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@edit")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in editableTabs"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.title"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n {{item.content}}\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabsValue")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabs")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tabIndex")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleTabsEdit(targetName, action) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),t("span",{attrs:{class:"hljs-string"}},[s._v("'add'")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" newTabName = ++"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".tabIndex + "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs.push({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": newTabName,\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab content'")]),s._v("\n });\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),t("span",{attrs:{class:"hljs-string"}},[s._v("'remove'")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" tabs = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" activeName = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" nextTab = tabs[index + "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] || tabs[index - "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue = activeName;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs = tabs.filter("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n add tab\n \n
    \n\n \n {{item.content}}\n \n\n\n',script:"\n export default {\n data() {\n return {\n editableTabsValue2: '2',\n editableTabs2: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n addTab(targetName) {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs2.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n let tabs = this.editableTabs2;\n let activeName = this.editableTabsValue2;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue2 = activeName;\n this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticStyle:{"margin-bottom":"20px"}},[t("el-button",{attrs:{size:"small"},on:{click:function(a){s.addTab(s.editableTabsValue2)}}},[s._v("\n add tab\n ")])],1),t("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":s.removeTab},model:{value:s.editableTabsValue2,callback:function(a){s.editableTabsValue2=a},expression:"editableTabsValue2"}},s._l(s.editableTabs2,function(a,l){return t("el-tab-pane",{key:a.name,attrs:{label:a.title,name:a.name}},[s._v("\n "+s._s(a.content)+"\n ")])}))],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n >")]),s._v("\n add tab\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"editableTabsValue2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@tab-remove")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"removeTab"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in editableTabs2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.title"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n {{item.content}}\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabsValue2")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabs2")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tabIndex")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n addTab(targetName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" newTabName = ++"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".tabIndex + "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2.push({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": newTabName,\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab content'")]),s._v("\n });\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" tabs = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" activeName = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" nextTab = tabs[index + "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] || tabs[index - "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"tabulacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabulacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabulación")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"estilo-de-tarjeta"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-de-tarjeta","aria-hidden":"true"}},[s._v("¶")]),s._v(" Estilo de Tarjeta")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tarjeta-con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tarjeta-con-bordes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tarjeta con Bordes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"posicion-de-tabulacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-tabulacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Posición de tabulación")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Es posible usar el atributo "),t("code",{pre:!0},[s._v("tab-position")]),s._v(" para establecer la posición de la tabulación.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"pestana-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pestana-personalizada","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pestaña Personalizada")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"agregar-y-cerrar-pestana"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agregar-y-cerrar-pestana","aria-hidden":"true"}},[s._v("¶")]),s._v(" Agregar y cerrar pestaña")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"boton-disparador-personalizado-de-la-nueva-pestana"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-disparador-personalizado-de-la-nueva-pestana","aria-hidden":"true"}},[s._v("¶")]),s._v(" Botón disparador personalizado de la nueva pestaña")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos-de-pestanas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pestanas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos de Pestañas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de Pestaña")]),t("td",[s._v("string")]),t("td",[s._v("card/border-card")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("si la Pestaña es cerrable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("addable")]),t("td",[s._v("si la Pestaña es añadible")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("si la Pestaña es añadible y cerrable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("nombre de la pestaña seleccionada")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("nombre de la primer pestaña")])]),t("tr",[t("td",[s._v("tab-position")]),t("td",[s._v("posición de tabulación")]),t("td",[s._v("string")]),t("td",[s._v("top/right/bottom/left")]),t("td",[s._v("top")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos-de-pestanas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-pestanas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos de Pestañas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de Evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("tab-click")]),t("td",[s._v("se lanza cuando se hace click a una pestaña")]),t("td",[s._v("pestaña clickeada")])]),t("tr",[t("td",[s._v("tab-remove")]),t("td",[s._v("se lanza cuando se hace click al botón tab-remove")]),t("td",[s._v("nombre de la pestaña removida")])]),t("tr",[t("td",[s._v("tab-add")]),t("td",[s._v("se lanza cuando se hace click al botón tab-add")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("edit")]),t("td",[s._v("se lanza cuando los botones de tab-add y/o tab-remove son clickeados")]),t("td",[s._v("(targetName, action)")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"attributos-del-tab-pane"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributos-del-tab-pane","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributos del Tab-pane")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores Aceptados")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("título de la pestaña")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si la Tabulación está deshabilitada")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1'")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("si el Tab es cerrable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1477)},function(s,a,t){"use strict";function l(s){t(1478)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1480),n=t.n(e),r=t(1481),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1479);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("667276ac",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-box.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-box.demo-tag .button-new-tag{margin-left:10px;height:32px;line-height:30px;padding-top:0;padding-bottom:0}.demo-box.demo-tag .input-new-tag{width:90px;margin-left:10px;vertical-align:bottom}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}],dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){var s=this;this.inputVisible=!0,this.$nextTick(function(a){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Se utiliza para marcar y seleccionar.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Tag One\nTag Two\nTag Three\nTag Four\nTag Five\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tag",[s._v("Tag One")]),t("el-tag",{attrs:{type:"success"}},[s._v("Tag Two")]),t("el-tag",{attrs:{type:"info"}},[s._v("Tag Three")]),t("el-tag",{attrs:{type:"warning"}},[s._v("Tag Four")]),t("el-tag",{attrs:{type:"danger"}},[s._v("Tag Five")])],1),t("p",[s._v("Utilice el atributo "),t("code",[s._v("type")]),s._v(" para definir el tipo de etiqueta. Además, el atributo "),t("code",[s._v("color")]),s._v(" se puede utilizar para establecer el color de fondo de la etiqueta.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("Tag One"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("Tag Two"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("Tag Three"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("Tag Four"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("Tag Five"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n {{tag.name}}\n\n\n\n',script:"\n export default {\n data() {\n return {\n tags: [\n { name: 'Tag 1', type: '' },\n { name: 'Tag 2', type: 'success' },\n { name: 'Tag 3', type: 'info' },\n { name: 'Tag 4', type: 'warning' },\n { name: 'Tag 5', type: 'danger' }\n ]\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},s._l(s.tags,function(a){return t("el-tag",{key:a.name,attrs:{closable:"",type:a.type}},[s._v("\n "+s._s(a.name)+"\n")])})),t("p",[s._v("el atributo "),t("code",[s._v("closable")]),s._v(" puede usarse para definir una etiqueta removible. Acepta un "),t("code",[s._v("Boolean")]),s._v(". De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo "),t("code",[s._v("disable-transitions")]),s._v(" , que acepta "),t("code",[s._v("Boolean")]),s._v(", como "),t("code",[s._v("true")]),s._v(". Se dispara el evento "),t("code",[s._v("close")]),s._v(" cuando la etiqueta es removida.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tag in tags"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tag.name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tag.type"')]),s._v(">")]),s._v("\n {{tag.name}}\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tags")]),s._v(": [\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 1'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 2'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 3'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 4'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v(" },\n { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 5'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'danger'")]),s._v(" }\n ]\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n {{tag}}\n\n\n\n+ New Tag\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n inputVisible: false,\n inputValue: ''\n };\n },\n methods: {\n handleClose(tag) {\n this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n },\n\n showInput() {\n this.inputVisible = true;\n this.$nextTick(_ => {\n this.$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n let inputValue = this.inputValue;\n if (inputValue) {\n this.dynamicTags.push(inputValue);\n }\n this.inputVisible = false;\n this.inputValue = '';\n }\n }\n }\n",style:"\n .el-tag + .el-tag {\n margin-left: 10px;\n }\n .button-new-tag {\n margin-left: 10px;\n height: 32px;\n line-height: 30px;\n padding-top: 0;\n padding-bottom: 0;\n }\n .input-new-tag {\n width: 90px;\n margin-left: 10px;\n vertical-align: bottom;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s._l(s.dynamicTags,function(a){return t("el-tag",{key:a,attrs:{closable:"","disable-transitions":!1},on:{close:function(t){s.handleClose(a)}}},[s._v("\n "+s._s(a)+"\n")])}),s.inputVisible?t("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(a){if(!("button"in a)&&s._k(a.keyCode,"enter",13,a.key))return null;s.handleInputConfirm(a)}},model:{value:s.inputValue,callback:function(a){s.inputValue=a},expression:"inputValue"}}):t("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tag"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tag in dynamicTags"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":disable-transitions")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose(tag)"')]),s._v(">")]),s._v("\n {{tag}}\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"input-new-tag"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"inputVisible"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"inputValue"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"saveTagInput"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@keyup.enter.native")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleInputConfirm"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@blur")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"button-new-tag"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-tag")]),s._v(" + "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-tag")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".button-new-tag")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("32px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("30px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("padding-top")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("padding-bottom")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".input-new-tag")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("90px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("vertical-align")]),s._v(": bottom;\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("dynamicTags")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 1'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 2'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 3'")]),s._v("],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inputVisible")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inputValue")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClose(tag) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.splice("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n },\n\n showInput() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputVisible = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$nextTick("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" inputValue = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputValue;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (inputValue) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputVisible = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputValue = "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Además del tamaño predeterminado, el componente Tag proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Default\nMedium\nSmall\nMini\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tag",[s._v("Default")]),t("el-tag",{attrs:{size:"medium"}},[s._v("Medium")]),t("el-tag",{attrs:{size:"small"}},[s._v("Small")]),t("el-tag",{attrs:{size:"mini"}},[s._v("Mini")])],1),t("p",[s._v("Utilice el atributo "),t("code",[s._v("size")]),s._v(" para establecer tamaños adicionales con "),t("code",[s._v("medium")]),s._v(", "),t("code",[s._v("small")]),s._v(" o "),t("code",[s._v("mini")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("Default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Medium"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Small"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("Mini"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"etiqueta-removible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#etiqueta-removible","aria-hidden":"true"}},[s._v("¶")]),s._v(" Etiqueta removible")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"editar-dinamicamente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#editar-dinamicamente","aria-hidden":"true"}},[s._v("¶")]),s._v(" Editar dinámicamente")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Puede utilizar el evento "),t("code",{pre:!0},[s._v("close")]),s._v(" para añadir y eliminar etiquetas dinámicamente.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tamaños")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("tema")]),t("td",[s._v("string")]),t("td",[s._v("success/info/warning/danger")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("si el Tag puede ser removido")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disable-transitions")]),t("td",[s._v("si se deshabilitan las animaciones")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("hit")]),t("td",[s._v("si el Tag tiene un borde resaltado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("color")]),t("td",[s._v("color de fondo del Tag")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del Tag")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("close")]),t("td",[s._v("se disoara cuando el Tag es removido")]),t("td",[s._v("—")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1483)},function(s,a,t){"use strict";function l(s){t(1484)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1486),n=t.n(e),r=t(1487),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1485);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("0051b704",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-box .el-date-editor+.el-date-editor{margin-left:10px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{value1:"",value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40),value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],startTime:"",endTime:""}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Use el Time Picker para input de tipo time.")]),s._m(1),t("p",[s._v("Provee una lista de tiempo fijo para que los usuarios escogan.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value1: ''\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})],1),t("p",[s._v("Use el tag "),t("code",[s._v("el-time-select")]),s._v(", se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con "),t("code",[s._v("start")]),s._v(", "),t("code",[s._v("end")]),s._v(" y "),t("code",[s._v("step")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Select time"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Un tiempo arbitrario puede ser escogido.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value2: new Date(2016, 9, 10, 18, 40),\n value3: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}}),t("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})]],2),t("p",[s._v("Al usar el tag "),t("code",[s._v("el-time-picker")]),s._v(", es posible limitar el rango de tiempo al especificar "),t("code",[s._v("selectableRange")]),s._v(". Por defecto, es posible hacer scroll con la rueda del mouse para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo "),t("code",[s._v("arrow-control")]),s._v(" esté establecido.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("arrow-control")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("18")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v("),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("18")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n",script:"\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(a){s.startTime=a},expression:"startTime"}}),t("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(a){s.endTime=a},expression:"endTime"}})]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"startTime"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"endTime"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\"")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("startTime")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("endTime")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Es posible escoger un rango de tiempo arbitrario.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}}),t("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})]],2),t("p",[s._v("Es posible seleccionar un rango de tiempo al añadir el atributo "),t("code",[s._v("is-range")]),s._v(". También, "),t("code",[s._v("arrow-control")]),s._v(" es soportado en modo de rango.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("is-range")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("is-range")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("arrow-control")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": ["),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v("), "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": ["),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v("), "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")]\n };\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"selector-de-tiempo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selector de Tiempo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"selector-de-tiempo-fijo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-fijo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selector de tiempo fijo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"selector-de-tiempo-arbitrario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-arbitrario","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selector de tiempo arbitrario")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"rango-de-tiempo-fijo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-fijo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rango de tiempo fijo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"rango-de-tiempo-arbitrario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-arbitrario","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rango de tiempo arbitrario")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("si el Time Picker está en modo de sólo lectura")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el Time Picker se encuentra deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("si el input puede ser editado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("si mostrar el botón de borrado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del input")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder en un modo fuera de rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("start-placeholder")]),t("td",[s._v("placeholder para el tiempo de inicio en modo de rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("end-placeholder")]),t("td",[s._v("placeholder para el tiempo de finalización en modo de rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("is-range")]),t("td",[s._v("si es posible escoger un rango de tiempo, solo funciona con "),t("code",{pre:!0},[s._v("")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("arrow-control")]),t("td",[s._v("si es posible escoger el tiempo usando los botones de flecha, solo funciona con "),t("code",{pre:!0},[s._v("")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("valor del selector")]),t("td",[s._v("Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo")]),t("td",[s._v("hour "),t("code",{pre:!0},[s._v("HH")]),s._v(", minute "),t("code",{pre:!0},[s._v("mm")]),s._v(", second "),t("code",{pre:!0},[s._v("ss")])]),t("td",[s._v("HH:mm:ss")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alineación")]),t("td",[s._v("left / center / right")]),t("td",[s._v("left")]),t("td")]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase personalizada para el dropdown del Time Picker")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("picker-options")]),t("td",[s._v("opciones adicionales, revisar la tabla posterior")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{}")])]),t("tr",[t("td",[s._v("range-separator")]),t("td",[s._v("separador de rango")]),t("td",[s._v("string")]),t("td",[s._v("-")]),t("td",[s._v("'-'")])]),t("tr",[t("td",[s._v("default-value")]),t("td",[s._v("opcional, fecha por defecto del calendario")]),t("td",[s._v("Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo")]),t("td",[s._v("cualquier cosa aceptada por "),t("code",{pre:!0},[s._v("new Date()")]),s._v(" para el Selector de Tiempo, Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value-format")]),t("td",[s._v("opcional, solo para Time Picker, formato del valor vinculado. Si no se especifica, el valor vinculado será un objeto Date")]),t("td",[s._v("string")]),t("td",[s._v("ver "),t("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[s._v("date formats")])]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("como "),t("code",{pre:!0},[s._v("name")]),s._v(" en input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("prefix-icon")]),t("td",[s._v("Clase personalizada para el icono de prefijado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-time")])]),t("tr",[t("td",[s._v("clear-icon")]),t("td",[s._v("Clase personalizada para el icono "),t("code",{pre:!0},[s._v("clear")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-circle-close")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"opciones-para-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Opciones para Time Picker")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("start")]),t("td",[s._v("tiempo de inicio")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("09:00")])]),t("tr",[t("td",[s._v("end")]),t("td",[s._v("tiempo de finalización")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("18:00")])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("salto de tiempo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("00:30")])]),t("tr",[t("td",[s._v("minTime")]),t("td",[s._v("tiempo mínimo, cualquier tiempo antes de éste será deshabilitado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("00:00")])]),t("tr",[t("td",[s._v("maxTime")]),t("td",[s._v("tiempo máximo, cualquier tiempo después de éste será deshabilitado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"opciones-para-time-picker-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Opciones para Time Picker")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("selectableRange")]),t("td",[s._v("rango de tiempo disponible p.ej. "),t("code",{pre:!0},[s._v("'18:30:00 - 20:30:00'")]),s._v("ó"),t("code",{pre:!0},[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),t("td",[s._v("string / array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("format")]),t("td",[s._v("formato para el selector")]),t("td",[s._v("string")]),t("td",[s._v("hour "),t("code",{pre:!0},[s._v("HH")]),s._v(", minute "),t("code",{pre:!0},[s._v("mm")]),s._v(", second "),t("code",{pre:!0},[s._v("ss")])]),t("td",[s._v("HH:mm:ss")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de Evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se lanza cuando el usuario confirma el valor")]),t("td",[s._v("valor vinculado del componente")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("se lanza cuando el input se difumina")]),t("td",[s._v("instancia del componente")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("se lanza cuando el input se enfoca")]),t("td",[s._v("instancia del componente")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1489)},function(s,a,t){"use strict";function l(s){t(1490)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1492),n=t.n(e),r=t(1493),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1491);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("905508ae",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-tooltip.demo-es .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip.demo-es .box{width:400px}.demo-tooltip.demo-es .box .top{text-align:center}.demo-tooltip.demo-es .box .left{float:left;width:110px}.demo-tooltip.demo-es .box .right{float:right;width:110px}.demo-tooltip.demo-es .box .bottom{clear:both;text-align:center}.demo-tooltip.demo-es .box .item{margin:4px}.demo-tooltip.demo-es .box .left .el-tooltip__popper,.demo-tooltip.demo-es .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip.demo-es .box .el-tooltip{margin-left:0}.demo-tooltip.demo-es:first-of-type .source .el-button{width:110px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{disabled:!1}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Mostrar aviso de información con el hover del mouse.")]),s._m(1),t("p",[s._v("Tooltip tiene 9 colocaciones.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n
    \n \n top-start\n \n \n top\n \n \n top-end\n \n
    \n
    \n \n left-start\n \n \n left\n \n \n left-end\n \n
    \n\n
    \n \n right-start\n \n \n right\n \n \n right-end\n \n
    \n
    \n \n bottom-start\n \n \n bottom\n \n \n bottom-end\n \n
    \n
    \n\n\n',script:null,style:"\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"box"},[t("div",{staticClass:"top"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[t("el-button",[s._v("top-start")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[t("el-button",[s._v("top")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[t("el-button",[s._v("top-end")])],1)],1),t("div",{staticClass:"left"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[t("el-button",[s._v("left-start")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[t("el-button",[s._v("left")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[t("el-button",[s._v("left-end")])],1)],1),t("div",{staticClass:"right"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[t("el-button",[s._v("right-start")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[t("el-button",[s._v("right")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[t("el-button",[s._v("right-end")])],1)],1),t("div",{staticClass:"bottom"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[t("el-button",[s._v("bottom-start")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[t("el-button",[s._v("bottom")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[t("el-button",[s._v("bottom-end")])],1)],1)])]),t("p",[s._v("Use el atributo "),t("code",[s._v("content")]),s._v(" para establecer el contenido que se mostrará al hacer hover. El atributo "),t("code",[s._v("placement")]),s._v(" determina la posición del tooltip. Su valor es "),t("code",[s._v("[orientation]-[alignment]")]),s._v(" con cuatro orientaciones "),t("code",[s._v("top")]),s._v(", "),t("code",[s._v("left")]),s._v(", "),t("code",[s._v("right")]),s._v(", "),t("code",[s._v("bottom")]),s._v(" y tres alineaciones "),t("code",[s._v("start")]),s._v(", "),t("code",[s._v("end")]),s._v(", "),t("code",[s._v("null")]),s._v(", la alineación default es null. Tome "),t("code",[s._v('placement="left-end"')]),s._v(" como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"box"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Top Left prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top-start"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top-start"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Top Center prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Top Right prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top-end"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top-end"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Left Top prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"left-start"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left-start"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Left Center prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Left Bottom prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"left-end"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left-end"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Right Top prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right-start"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right-start"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Right Center prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Right Bottom prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right-end"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right-end"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom Left prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom Center prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom Right prompts info"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom-end"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"undefined"}},[s._v("\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Dark\n\n\n Light\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("el-button",[s._v("Dark")])],1),t("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("el-button",[s._v("Light")])],1)],1),t("p",[s._v("Establecer "),t("code",[s._v("effect")]),s._v(" para modificar el tema, el valor por defecto es "),t("code",[s._v("dark")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Top center"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Dark"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom center"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"light"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Light"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Despliegue múltiples líneas de texto y establezca su formato.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    multiple lines
    second line
    \n Top center\n    \n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tooltip",{attrs:{placement:"top"}},[t("div",{attrs:{slot:"content"},slot:"content"},[s._v("multiple lines"),t("br"),s._v("second line")]),t("el-button",[s._v("Top center")])],1)],1),t("p",[s._v("Sobre-escribiba el atributo "),t("code",[s._v("content")]),s._v(" del "),t("code",[s._v("el-tooltip")]),s._v(" añadiendo un slot llamado "),t("code",[s._v("content")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"content"')]),s._v(">")]),s._v("multiple lines"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("br")]),s._v("/>")]),s._v("second line"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Top center"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Adicional a los usos básicos, existen algunos atributos que permiten la personalización:")]),s._m(6),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .slide-fade-enter-active {\n transition: all .3s ease;\n }\n .slide-fade-leave-active {\n transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n }\n .slide-fade-enter, .expand-fade-leave-active {\n margin-left: 20px;\n opacity: 0;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-tooltip",{attrs:{disabled:s.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[t("el-button",{on:{click:function(a){s.disabled=!s.disabled}}},[s._v("click to "+s._s(s.disabled?"active":"close")+" tooltip function")])],1)]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"click to close tooltip function"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"light"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("click to {{disabled ? 'active' : 'close'}} tooltip function"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-enter-active")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("transition")]),s._v(": all ."),t("span",{attrs:{class:"hljs-number"}},[s._v("3s")]),s._v(" ease;\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-leave-active")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("transition")]),s._v(": all ."),t("span",{attrs:{class:"hljs-number"}},[s._v("3s")]),s._v(" "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("cubic-bezier")]),s._v("(1.0, 0.5, 0.8, 1.0);\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-enter")]),s._v(", "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".expand-fade-leave-active")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tema"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tema","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tema")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Tooltip tiene dos temas: "),t("code",{pre:!0},[s._v("dark")]),s._v(" and "),t("code",{pre:!0},[s._v("light")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"mas-contenido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-contenido","aria-hidden":"true"}},[s._v("¶")]),s._v(" Más Contenido")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-avanzado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-avanzado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso Avanzado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("el atributo "),t("code",{pre:!0},[s._v("transition")]),s._v(" permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es "),t("code",{pre:!0},[s._v("el-fade-in-linear")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("el atributo "),t("code",{pre:!0},[s._v("disabled")]),s._v(" permite deshabilitar "),t("code",{pre:!0},[s._v("tooltip")]),s._v(". Solo es necesario definirlo como "),t("code",{pre:!0},[s._v("true")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("De hecho, Tooltip es una extension basada en "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(", es posible utilizar cualquier atributo permitido en Vue-popper.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("El componente "),t("code",{pre:!0},[s._v("router-link")]),s._v(" no es soportado por Tooltip, favor de usar "),t("code",{pre:!0},[s._v("vm.$router.push")]),s._v(".")]),t("p",[s._v("Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v(".\nEs necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("effect")]),t("td",[s._v("tema del Tooltip")]),t("td",[s._v("string")]),t("td",[s._v("dark/light")]),t("td",[s._v("dark")])]),t("tr",[t("td",[s._v("content")]),t("td",[s._v("contenido a mostrar, puede ser sobre-escrito por "),t("code",{pre:!0},[s._v("slot#content")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placement")]),t("td",[s._v("posición del Tooltip")]),t("td",[s._v("string")]),t("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),t("td",[s._v("bottom")])]),t("tr",[t("td",[s._v("value(v-model)")]),t("td",[s._v("visibilidad del Tooltip")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("saber si el Tooltip se encuentra deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("offset del Tooltip")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("transition")]),t("td",[s._v("nombre de animación")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-fade-in-linear")])]),t("tr",[t("td",[s._v("visible-arrow")]),t("td",[s._v("si una flecha es mostrada. Para mayor información, revisar la página de "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("popper-options")]),t("td",[s._v("parámetros de "),t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),t("td",[s._v("Object")]),t("td",[s._v("referirse a la documentación de "),t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),t("td",[t("code",{pre:!0},[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),t("tr",[t("td",[s._v("open-delay")]),t("td",[s._v("retraso de la apariencia, en milisegundos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("manual")]),t("td",[s._v("si el Tooltipo será controlado de forma manual. "),t("code",{pre:!0},[s._v("mouseenter")]),s._v(" y "),t("code",{pre:!0},[s._v("mouseleave")]),s._v(" no tendrán efecto si fue establecido como "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase personalizada para el popper del Tooltip")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("enterable")]),t("td",[s._v("si el mouse puede entrar al Tooltip")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("hide-after")]),t("td",[s._v("tiempo a esperar en milisegundos para esconder el Tooltip")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1495)},function(s,a,t){"use strict";function l(s){t(1496)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1498),n=t.n(e),r=t(1499),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1497);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("7ba7f474",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-transfer .transfer-footer{margin-left:15px;padding:6px 5px}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{data:function(s){for(var a=[],t=1;t<=15;t++)a.push({key:t,label:"Option "+t,disabled:t%4==0});return a}(),data2:function(s){var a=[],t=["CA","IL","MD","TX","FL","CO","CT"];return["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(s,l){a.push({label:s,key:l,initial:t[l]})}),a}(),data3:function(s){for(var a=[],t=1;t<=15;t++)a.push({value:t,desc:"Option "+t,disabled:t%4==0});return a}(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,a){return a.initial.toLowerCase().indexOf(s.toLowerCase())>-1},renderFunc:function(s,a){return s("span",null,[a.key," - ",a.label])}}},methods:{handleChange:function(s,a,t){console.log(s,a,t)}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value1: [1, 4]\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})]],2),t("p",[s._v("Los datos se pasan a Transfer a través del atributo "),t("code",[s._v("data")]),s._v(". Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: "),t("code",[s._v("key")]),s._v(" que será el identificador del item, "),t("code",[s._v("label")]),s._v(" que será el texto a mostrar, y "),t("code",[s._v("disabled")]),s._v(" que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a "),t("code",[s._v("v-model")]),s._v(", y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el "),t("code",[s._v("v-model")]),s._v(" con un array.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData = "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),t("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": i,\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("`Option "),t("span",{attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),t("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": generateData(),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": ["),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),t("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v("]\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Puede buscar y filtrar los items.")]),s._m(3),s._m(4),t("p",[s._v(":::")]),s._m(5),t("p",[s._v("Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value3: [1],\n renderFunc(h, option) {\n return { option.key } - { option.label };\n }\n };\n },\n\n methods: {\n handleChange(value, direction, movedKeys) {\n console.log(value, direction, movedKeys);\n }\n }\n };\n",style:"\n .transfer-footer {\n margin-left: 20px;\n padding: 6px 5px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-transfer",{attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}},[t("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[s._v("Operation")]),t("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[s._v("Operation")])],1)]],2),t("p",[s._v("Use "),t("code",[s._v("titles")]),s._v(", "),t("code",[s._v("button-texts")]),s._v(", "),t("code",[s._v("render-content")]),s._v(" y "),t("code",[s._v("format")]),s._v(" respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Para el pie de la lista hay dos slots: "),t("code",[s._v("left-footer")]),s._v(" y "),t("code",[s._v("right-footer")]),s._v(". Además, si quiere algunos items marcados inicialmente puede usar "),t("code",[s._v("left-default-checked")]),s._v(" y "),t("code",[s._v("right-default-checked")]),s._v(". Finalmente este ejemplo muestra el evento "),t("code",[s._v("change")]),s._v(". Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real "),t("code",[s._v("render-content")]),s._v(" funcionará si las dependencias son configuradas correctamente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":left-default-checked")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":right-default-checked")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"[1]"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":render-content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"renderFunc"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":titles")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"['Source', 'Target']\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":button-texts")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"['To left', 'To right']\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":format")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n noChecked: '${total}',\n hasChecked: '${checked}/${total}'\n }\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"left-footer"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Operation"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"right-footer"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Operation"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transfer-footer")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("6px")]),s._v(" "),t("span",{attrs:{class:"hljs-number"}},[s._v("5px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData = "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),t("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": i,\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("`Option "),t("span",{attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),t("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": generateData(),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": ["),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("],\n renderFunc(h, option) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"xml"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")])]),s._v(";\n }\n };\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value, direction, movedKeys) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n const generateData3 = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n value: i,\n desc: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data3: generateData3(),\n value4: []\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})]],2),t("p",[s._v("En este ejemplo los elementos no tienen "),t("code",[s._v("key")]),s._v("y "),t("code",[s._v("label")]),s._v(", en vez de eso tienen "),t("code",[s._v("value")]),s._v(" y "),t("code",[s._v("desc")]),s._v(". Así que tiene que añadir alias para "),t("code",[s._v("key")]),s._v(" y "),t("code",[s._v("label")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n key: 'value',\n label: 'desc'\n }\"")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData3 = "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),t("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": i,\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("`Option "),t("span",{attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),t("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data3")]),s._v(": generateData3(),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": []\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"filtrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filtrar")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("::demo Ponga el atributo "),t("code",{pre:!0},[s._v("filterable")]),s._v(" a true para permitir el filtrado.Por defecto si el "),t("code",{pre:!0},[s._v("label")]),s._v(" del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo "),t("code",{pre:!0},[s._v("filter-method")]),s._v(", que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"filterMethod"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("filter-placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"State Abbreviations"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData2 = "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" states = ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Illinois'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Maryland'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Texas'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Colorado'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Connecticut '")]),s._v("];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" initials = ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'CA'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'IL'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'MD'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'TX'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'FL'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CO'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'CT'")]),s._v("];\n states.forEach("),t("span",{attrs:{class:"hljs-function"}},[s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n data.push({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": city,\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": index,\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("initial")]),s._v(": initials[index]\n });\n });\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": generateData2(),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": [],\n filterMethod(query, item) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" item.initial.toLowerCase().indexOf(query.toLowerCase()) > "),t("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n }\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"personalizable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Personalizable")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"prop-con-alias"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prop-con-alias","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prop con alias")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Por defecto Transfer busca los atributos "),t("code",{pre:!0},[s._v("key")]),s._v(", "),t("code",{pre:!0},[s._v("label")]),s._v(", y "),t("code",{pre:!0},[s._v("disabled")]),s._v(" en cada elemento. Si sus datos tienen un nombre diferente para la clave puede usar el atributo "),t("code",{pre:!0},[s._v("props")]),s._v(" para añadir alias.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atriburo")]),t("th",[s._v("Descripcion")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("data")]),t("td",[s._v("Origen de datos")]),t("td",[s._v("array[{ key, label, disabled }]")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])]),t("tr",[t("td",[s._v("filterable")]),t("td",[s._v("Si se puede filtrar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("filter-placeholder")]),t("td",[s._v("Placeholder para el input del filtro")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Enter keyword")])]),t("tr",[t("td",[s._v("filter-method")]),t("td",[s._v("Método de filtrado")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("titles")]),t("td",[s._v("Títulos de las listas")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['List 1', 'List 2']")])]),t("tr",[t("td",[s._v("button-texts")]),t("td",[s._v("Texto de los botones")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])]),t("tr",[t("td",[s._v("render-content")]),t("td",[s._v("Función de renderizado")]),t("td",[s._v("function(h, option)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("format")]),t("td",[s._v("Texto para el status en el header")]),t("td",[s._v("object{noChecked, hasChecked}")]),t("td",[s._v("—")]),t("td",[s._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("prop alias para el origen de datos")]),t("td",[s._v("object{key, label, disabled}")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("left-default-checked")]),t("td",[s._v("Array de claves de los elementos marcados inicialmente en la lista de la izquierda")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])]),t("tr",[t("td",[s._v("right-default-checked")]),t("td",[s._v("Array de claves de los elementos marcados inicialmente en la lista de la derecha")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripcion")])])]),t("tbody",[t("tr",[t("td",[s._v("left-footer")]),t("td",[s._v("Contenido del footer de la lista de la izquierda")])]),t("tr",[t("td",[s._v("right-footer")]),t("td",[s._v("Contenido del footer de la lista de la derecha")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Method")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("clearQuery")]),t("td",[s._v("borra la palabra clave del filtro de un determinado panel")]),t("td",[s._v("'left' / 'right'")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripcion")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se lanzá cuando los elementos cambian en la lista de la derecha")]),t("td",[s._v("array con las claves de los elementos de la lista de la derecha")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1501)},function(s,a,t){"use strict";function l(s){t(1502)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1504),n=t.n(e),r=t(1505),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1503);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("51e26ae7",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".transition-box{margin-bottom:10px;width:200px;height:100px;border-radius:4px;background-color:#409eff;text-align:center;color:#fff;padding:40px 20px;margin-right:20px;box-sizing:border-box}",""])},function(s,a,t){"use strict";s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-button",{on:{click:function(a){s.show=!s.show}}},[s._v("Click Me")]),t("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[t("transition",{attrs:{name:"el-fade-in-linear"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),t("transition",{attrs:{name:"el-fade-in"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),t("p",[s._v("Tenemos dos efectos de fading: "),t("code",[s._v("el-fade-in-linear")]),s._v(" y "),t("code",[s._v("el-fade-in")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"show"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"show"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),t("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show2: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-button",{on:{click:function(a){s.show2=!s.show2}}},[s._v("Click Me")]),t("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[t("transition",{attrs:{name:"el-zoom-in-center"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),t("transition",{attrs:{name:"el-zoom-in-top"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),t("transition",{attrs:{name:"el-zoom-in-bottom"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),t("p",[s._v("También tenemos zoom: "),t("code",[s._v("el-zoom-in-center")]),s._v(", "),t("code",[s._v("el-zoom-in-top")]),s._v(" y "),t("code",[s._v("el-zoom-in-bottom")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show2")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),t("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show3: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-button",{on:{click:function(a){s.show3=!s.show3}}},[s._v("Click Me")]),t("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[t("el-collapse-transition",[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show3,expression:"show3"}]},[t("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")]),t("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")])])])],1)],1)]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"show3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show3")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),t("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"transiciones-incorporadas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transiciones-incorporadas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transiciones incorporadas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la "),t("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[s._v("documentación")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fade")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[s._v("¶")]),s._v(" Zoom")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"colapsado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colapsado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Colapsado")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Para efectos de colapsado usar el componente "),t("code",{pre:!0},[s._v("el-collapse-transition")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-js"}},[t("span",{attrs:{class:"hljs-comment"}},[s._v("// fade/zoom")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-chalk/base.css'")]),s._v(";\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// colapsar")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" CollapseTransition "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/transitions/collapse-transition'")]),s._v(";\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1507)},function(s,a,t){"use strict";function l(s){t(1508)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1510),n=t.n(e),r=t(1511),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1509);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("2dafad48",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-tree .leaf{width:20px;background:#ddd}.demo-tree .folder{width:20px;background:#888}.demo-tree .buttons,.demo-tree .filter-tree{margin-top:20px}.demo-tree .custom-tree-container{display:-ms-flexbox;display:flex;margin:-24px}.demo-tree .block{-ms-flex:1;flex:1;padding:8px 24px 24px}.demo-tree .block>p{text-align:center;margin:0;line-height:4}.demo-tree .block:first-child{border-right:1px solid #eff2f6}.demo-tree .custom-tree-node{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;font-size:14px;padding-right:8px}",""])},function(s,a,t){"use strict";a.__esModule=!0;var l=[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],e=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],n=[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],r=1e3,v=[{name:"region1"},{name:"region2"}],c=1,_={label:"name",children:"zones"},o={label:"name",children:"zones",isLeaf:"leaf"},i={children:"children",label:"label"};a.default={watch:{filterText:function(s){this.$refs.tree2.filter(s)}},methods:{handleCheckChange:function(s,a,t){console.log(s,a,t)},handleNodeClick:function(s){console.log(s)},loadNode:function(s,a){if(0===s.level)return a([{name:"Root1"},{name:"Root2"}]);if(s.level>3)return a([]);var t;t="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s=void 0;s=t?[{name:"zone"+c++},{name:"zone"+c++}]:[],a(s)},500)},loadNode1:function(s,a){return 0===s.level?a([{name:"region"}]):s.level>1?a([]):void setTimeout(function(){a([{name:"leaf",leaf:!0},{name:"zone"}])},500)},getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Level two 2-1"},{id:9,label:"Level three 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])},append:function(s){var a={id:r++,label:"testtest",children:[]};s.children||this.$set(s,"children",[]),s.children.push(a)},remove:function(s,a){var t=s.parent,l=t.data.children||t.data,e=l.findIndex(function(s){return s.id===a.id});l.splice(e,1)},renderContent:function(s,a){var t=this,l=a.node,e=a.data;a.store;return s("span",{class:"custom-tree-node"},[s("span",null,[l.label]),s("span",null,[s("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return t.append(e)}}},["Append"]),s("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return t.remove(l,e)}}},["Delete"])])])},filterNode:function(s,a){return!s||-1!==a.label.indexOf(s)}},data:function(){return{data:l,data2:e,data3:n,data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e)),regions:v,defaultProps:i,props:_,props1:o,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Muestra un conjunto de datos jerárquicos.")]),s._m(1),t("p",[s._v("Estructura básica de árbol.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@node-click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleNodeClick"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-1-1'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Usado para la selección de nodos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n props: {\n label: 'name',\n children: 'zones'\n },\n count: 1\n };\n },\n methods: {\n handleCheckChange(data, checked, indeterminate) {\n console.log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n console.log(data);\n },\n loadNode(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n }\n if (node.level > 3) return resolve([]);\n\n var hasChild;\n if (node.data.name === 'region1') {\n hasChild = true;\n } else if (node.data.name === 'region2') {\n hasChild = false;\n } else {\n hasChild = Math.random() > 0.5;\n }\n\n setTimeout(() => {\n var data;\n if (hasChild) {\n data = [{\n name: 'zone' + this.count++\n }, {\n name: 'zone' + this.count++\n }];\n } else {\n data = [];\n }\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),t("p",[s._v("Este ejemplo también muestra como cargar los datos de forma asíncrona.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":load")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"loadNode"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("lazy")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@check-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'name'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'zones'")]),s._v("\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("count")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCheckChange(data, checked, indeterminate) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n },\n loadNode(node, resolve) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([{ "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Root1'")]),s._v(" }, { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Root2'")]),s._v(" }]);\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level > "),t("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(") "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([]);\n\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" hasChild;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.data.name === "),t("span",{attrs:{class:"hljs-string"}},[s._v("'region1'")]),s._v(") {\n hasChild = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.data.name === "),t("span",{attrs:{class:"hljs-string"}},[s._v("'region2'")]),s._v(") {\n hasChild = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n hasChild = "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random() > "),t("span",{attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v(";\n }\n\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" data;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (hasChild) {\n data = [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v(" + "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".count++\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v(" + "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".count++\n }];\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n data = [];\n }\n\n resolve(data);\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("500")]),s._v(");\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n props1: {\n label: 'name',\n children: 'zones',\n isLeaf: 'leaf'\n },\n };\n },\n methods: {\n loadNode1(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'region' }]);\n }\n if (node.level > 1) return resolve([]);\n\n setTimeout(() => {\n const data = [{\n name: 'leaf',\n leaf: true\n }, {\n name: 'zone'\n }];\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{props:s.props1,load:s.loadNode1,lazy:"","show-checkbox":""}})],1),t("p",[s._v("Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"props1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":load")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"loadNode1"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("lazy")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("props1")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'name'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'zones'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("isLeaf")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'leaf'")]),s._v("\n },\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n loadNode1(node, resolve) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level === "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([{ "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'region'")]),s._v(" }]);\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level > "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([]);\n\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'leaf'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("leaf")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v("\n }];\n\n resolve(data);\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("500")]),s._v(");\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("El checkbox de un nodo se puede poner como desactivado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data3: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 3,\n label: 'Level two 2-1',\n children: [{\n id: 4,\n label: 'Level three 3-1-1'\n }, {\n id: 5,\n label: 'Level three 3-1-2',\n disabled: true\n }]\n }, {\n id: 2,\n label: 'Level two 2-2',\n disabled: true,\n children: [{\n id: 6,\n label: 'Level three 3-2-1'\n }, {\n id: 7,\n label: 'Level three 3-2-2',\n disabled: true\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label',\n disabled: 'disabled',\n },\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{data:s.data3,props:s.defaultProps,"show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),t("p",[s._v("En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@check-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data3")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }]\n }]\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'disabled'")]),s._v(",\n },\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Los nodos pueden estar desplegados o seleccionados por defecto.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),t("p",[s._v("Utilice "),t("code",[s._v("default-expanded-keys")]),s._v(" y "),t("code",[s._v("default-checked-keys")]),s._v(" para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan "),t("code",[s._v("node-key")]),s._v(". Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":default-expanded-keys")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":default-checked-keys")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"[5]"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n
    \n get by node\n get by key\n set by node\n set by key\n reset\n
    \n\n\n',script:"\n export default {\n methods: {\n getCheckedNodes() {\n console.log(this.$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n console.log(this.$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n this.$refs.tree.setCheckedNodes([{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 9,\n label: 'Level three 1-1-1'\n }]);\n },\n setCheckedKeys() {\n this.$refs.tree.setCheckedKeys([3]);\n },\n resetChecked() {\n this.$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),t("div",{staticClass:"buttons"},[t("el-button",{on:{click:s.getCheckedNodes}},[s._v("get by node")]),t("el-button",{on:{click:s.getCheckedKeys}},[s._v("get by key")]),t("el-button",{on:{click:s.setCheckedNodes}},[s._v("set by node")]),t("el-button",{on:{click:s.setCheckedKeys}},[s._v("set by key")]),t("el-button",{on:{click:s.resetChecked}},[s._v("reset")])],1)],1),t("p",[s._v("Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo "),t("code",[s._v("node-key")]),s._v(" es necesario.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tree"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("highlight-current")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"buttons"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("get by node"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("get by key"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("set by node"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("set by key"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"resetChecked"')]),s._v(">")]),s._v("reset"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n getCheckedNodes() {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }]);\n },\n setCheckedKeys() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),t("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v("]);\n },\n resetChecked() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n
    \n

    Using render-content

    \n \n \n
    \n
    \n

    Using scoped slot

    \n \n \n {{ node.label }}\n \n \n Append\n \n \n Delete\n \n \n \n \n
    \n
    \n\n\n\n\n',script:"\n let id = 1000;\n\n export default {\n data() {\n const data = [{\n id: 1,\n label: '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 return {\n data4: JSON.parse(JSON.stringify(data)),\n data5: JSON.parse(JSON.stringify(data))\n }\n },\n\n methods: {\n append(data) {\n const newChild = { id: id++, label: 'testtest', children: [] };\n if (!data.children) {\n this.$set(data, 'children', []);\n }\n data.children.push(newChild);\n },\n\n remove(node, data) {\n const parent = node.parent;\n const children = parent.data.children || parent.data;\n const index = children.findIndex(d => d.id === data.id);\n children.splice(index, 1);\n },\n\n renderContent(h, { node, data, store }) {\n return (\n \n {node.label}\n \n this.append(data) }>Append\n this.remove(node, data) }>Delete\n \n );\n }\n }\n };\n",style:"\n .custom-tree-node {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n padding-right: 8px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"custom-tree-container"},[t("div",{staticClass:"block"},[t("p",[s._v("Using render-content")]),t("el-tree",{attrs:{data:s.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),t("div",{staticClass:"block"},[t("p",[s._v("Using scoped slot")]),t("el-tree",{attrs:{data:s.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:s._u([{key:"default",fn:function(a){var l=a.node,e=a.data;return t("span",{staticClass:"custom-tree-node"},[t("span",[s._v(s._s(l.label))]),t("span",[t("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return s.append(e)}}},[s._v("\n Append\n ")]),t("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return s.remove(l,e)}}},[s._v("\n Delete\n ")])],1)])}}])})],1)])]),t("p",[s._v("There are two ways to customize template for tree nodes: "),t("code",[s._v("render-content")]),s._v(" and scoped slot. Utilice "),t("code",[s._v("render-content")]),s._v(" para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. If you prefer scoped slot, you'll have access to "),t("code",[s._v("node")]),s._v(" and "),t("code",[s._v("data")]),s._v(" in the scope, standing for the TreeNode object and node data of the current node respectively. Ten en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real "),t("code",[s._v("render-content")]),s._v(" funcionará si las dependencias relevantes están configuradas correctamente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"custom-tree-container"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Using render-content"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data4"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":expand-on-click-node")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":render-content")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"renderContent"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Using scoped slot"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data5"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":expand-on-click-node")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"custom-tree-node"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"{ node, data }"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{ node.label }}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"() => append(data)"')]),s._v(">")]),s._v("\n Append\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"() => remove(node, data)"')]),s._v(">")]),s._v("\n Delete\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"actionscript"}},[s._v("\n let id = "),t("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(";\n\n export "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [{\n id: "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n label: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n children: [{\n id: "),t("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n label: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n children: [{\n id: "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n label: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n id: "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n label: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n id: "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n label: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n children: [{\n id: "),t("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n label: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n id: "),t("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n label: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n id: "),t("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n label: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n children: [{\n id: "),t("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n label: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n id: "),t("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n label: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }];\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n data4: JSON.parse(JSON.stringify(data)),\n data5: JSON.parse(JSON.stringify(data))\n }\n },\n\n methods: {\n append(data) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" newChild = { id: id++, label: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'testtest'")]),s._v(", children: [] };\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!data.children) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("set")]),s._v("(data, "),t("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(", []);\n }\n data.children.push(newChild);\n },\n\n remove(node, data) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" parent = node.parent;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" children = parent.data.children || parent.data;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" index = children.findIndex(d => d.id === data.id);\n children.splice(index, "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n },\n\n renderContent(h, { node, data, store }) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (\n \n <'),t("span",{attrs:{class:"hljs-title"}},[s._v("span")]),s._v(">")]),s._v("{node.label}\n \n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".append(data) }>Append\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".remove(node, data) }>Delete\n \n );\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".custom-tree-node")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("flex")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": flex;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": space-between;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("padding-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("8px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Los nodos del árbol se pueden filtrar.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n\n',script:"\n export default {\n watch: {\n filterText(val) {\n this.$refs.tree2.filter(val);\n }\n },\n\n methods: {\n filterNode(value, data) {\n if (!value) return true;\n return data.label.indexOf(value) !== -1;\n }\n },\n\n data() {\n return {\n filterText: '',\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:s.filterText,callback:function(a){s.filterText=a},expression:"filterText"}}),t("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),t("p",[s._v("Invoque el método "),t("code",[s._v("filter")]),s._v(" de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario "),t("code",[s._v("filter-node-method")]),s._v(", y su valor el método de filtrado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Filter keyword"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"filter-tree"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":filter-node-method")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"filterNode"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("watch")]),s._v(": {\n filterText(val) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n }\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n filterNode(value, data) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!value) "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),t("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n }\n },\n\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("filterText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),t("p",[s._v("Solo puede ser expandido un nodo del mismo nivel a la vez.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@node-click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-1-1'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[s._v("¶")]),s._v(" Uso básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"seleccionable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccionable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Seleccionable")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"nodos-hoja-en-modo-perezoso"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nodos-hoja-en-modo-perezoso","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nodos hoja en modo perezoso")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"checkbox-desactivados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-desactivados","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox desactivados")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"desplegado-o-seleccionado-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desplegado-o-seleccionado-por-defecto","aria-hidden":"true"}},[s._v("¶")]),s._v(" Desplegado o seleccionado por defecto")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"seleccionando-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccionando-nodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Seleccionando nodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"contenido-personalizado-en-los-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenido-personalizado-en-los-nodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Contenido personalizado en los nodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"filtrado-de-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-nodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filtrado de nodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"acordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Acordeón")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("data")]),t("td",[s._v("Datos del árbol")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("empty-text")]),t("td",[s._v("Texto a mostrar cuando data es void")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("node-key")]),t("td",[s._v("Identificador único en todo el árbol para los nodos")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("Opciones de configuración")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("render-after-expand")]),t("td",[s._v("si se mostrarán los nodos hijo sólo después de que se desglose por primera vez un nodo padre")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("load")]),t("td",[s._v("Método para cargar los datos de subárboles")]),t("td",[s._v("function(node, resolve)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("render-content")]),t("td",[s._v("Función de renderizado para los nodos")]),t("td",[s._v("Function(h, { node, data, store }")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("highlight-current")]),t("td",[s._v("Si el nodo actual está resaltado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("default-expand-all")]),t("td",[s._v("Expandir todos los nodos por defecto")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("expand-on-click-node")]),t("td",[s._v("Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha")]),t("td",[s._v("—")]),t("td",[s._v("true")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("auto-expand-parent")]),t("td",[s._v("Expandir un nodo padre si el hijo está seleccionado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("default-expanded-keys")]),t("td",[s._v("Array de claves de los nodos expandidos inicialmente")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-checkbox")]),t("td",[s._v("Si un nodo es seleccionable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("check-strictly")]),t("td",[s._v("El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando "),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" es "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("default-checked-keys")]),t("td",[s._v("Array con claves de los nodos seleccionados inicialmente")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filter-node-method")]),t("td",[s._v("Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve "),t("code",{pre:!0},[s._v("false")]),s._v(" el nodo se oculta")]),t("td",[s._v("Function(value, data, node)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("accordion")]),t("td",[s._v("Si solo un nodo de cada nivel puede expandirse a la vez")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("indent")]),t("td",[s._v("Indentación horizontal de los nodos en niveles adyacentes, en pixeles")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("16")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("Especifica que clave del objecto nodo se utilizará como label")]),t("td",[s._v("string, function(data, node)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("children")]),t("td",[s._v("Especifica que objeto del nodo se utiliza como subárbol")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("isLeaf")]),t("td",[s._v("Especifica si el nodo es una hoja, only works when lazy load is enabled")]),t("td",[s._v("boolean, function(data, node)")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Métodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",{pre:!0},[s._v("Tree")]),s._v(" tiene los siguientes métodos, que devuelven el array de nodos seleccionados.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Método")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("filter")]),t("td",[s._v("Filtra los nodos del árbol, los nodos filtrados estarán ocultos")]),t("td",[s._v("Acepta un parámetro que será usado como primer parámetro para filter-node-method")])]),t("tr",[t("td",[s._v("updateKeyChildren")]),t("td",[s._v("Asocia un nuevo dato al nodo, solo funciona si "),t("code",{pre:!0},[s._v("node-key")]),s._v(" está asignado")]),t("td",[s._v("(key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato")])]),t("tr",[t("td",[s._v("getCheckedNodes")]),t("td",[s._v("Si los nodos puede ser seleccionado ("),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v("), devuelve el array de nodos seleccionados")]),t("td",[s._v("Acepta un booleano cuyo valor por defecto es "),t("code",{pre:!0},[s._v("false")])])]),t("tr",[t("td",[s._v("setCheckedNodes")]),t("td",[s._v("Establece algunos nodos como seleccionados, solo funciona cuando "),t("code",{pre:!0},[s._v("node-key")]),s._v(" está asignado")]),t("td",[s._v("Un array de nodos a seleccionar")])]),t("tr",[t("td",[s._v("getCheckedKeys")]),t("td",[s._v("Si los nodos pueden ser seleccionados ("),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v("), devuelve un array con las claves de los nodos seleccionados")]),t("td",[s._v("(leafOnly) Acepta un booleano que por defecto es "),t("code",{pre:!0},[s._v("false")]),s._v(".")])]),t("tr",[t("td",[s._v("setCheckedKeys")]),t("td",[s._v("Establece algunos nodos como seleccionados, solo si "),t("code",{pre:!0},[s._v("node-key")]),s._v(" está asignado")]),t("td",[s._v("(keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es "),t("code",{pre:!0},[s._v("false")]),s._v(". Si el parámetro es "),t("code",{pre:!0},[s._v("true")]),s._v(", solo devuelve los nodos seleccionados")])]),t("tr",[t("td",[s._v("setChecked")]),t("td",[s._v("Establece si un nodo está seleccionado, solo funciona si "),t("code",{pre:!0},[s._v("node-key")]),s._v(" esta asignado")]),t("td",[s._v("(key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad")])]),t("tr",[t("td",[s._v("getHalfCheckedNodes")]),t("td",[s._v("Si el nodo puede ser seleccionado ("),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v("), devuelve la mitad de la matriz de nodos actualmente seleccionada.")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("getHalfCheckedKeys")]),t("td",[s._v("Si el nodo puede ser seleccionado ("),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v("), devuelve la mitad de la matriz de claves del nodo actualmente seleccionado.")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("getCurrentKey")]),t("td",[s._v("devuelve la clave del nodo resaltado actualmente (null si no hay ninguno)")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("getCurrentNode")]),t("td",[s._v("devuelve el nodo resaltado (null si no hay ninguno)")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("setCurrentKey")]),t("td",[s._v("establece el nodo resaltado por la clave, solo funciona si "),t("code",{pre:!0},[s._v("node-key")]),s._v(" está asignado")]),t("td",[s._v("(key) la clave del nodo a ser resaltado")])]),t("tr",[t("td",[s._v("setCurrentNode")]),t("td",[s._v("establece el nodo resaltado, solo funciona si "),t("code",{pre:!0},[s._v("node-key")]),s._v(" está asignado")]),t("td",[s._v("(node) nodo a ser resaltado")])]),t("tr",[t("td",[s._v("getNode")]),t("td",[s._v("devuelve el nodo por el dato o la clave")]),t("td",[s._v("(data) los datos o clave del nodo")])]),t("tr",[t("td",[s._v("remove")]),t("td",[s._v("elimina un nodo")]),t("td",[s._v("(data) los datos del nodo o nodo a borrar")])]),t("tr",[t("td",[s._v("append")]),t("td",[s._v("añadir un nodo hijo a un nodo determinado del árbol")]),t("td",[s._v("(data, parentNode) 1. los datos del nodo hijo que se añadirán 2. los datos del nodo padre, clave o nodo")])]),t("tr",[t("td",[s._v("insertBefore")]),t("td",[s._v("insertar un nodo antes de un nodo dado en el árbol")]),t("td",[s._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])]),t("tr",[t("td",[s._v("insertAfter")]),t("td",[s._v("insertar un nodo después de un nodo dado en el árbol")]),t("td",[s._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("node-click")]),t("td",[s._v("se lanza cuando un nodo es pinchado")]),t("td",[s._v("tres parámetros: el objeto del nodo seleccionado, propiedad "),t("code",{pre:!0},[s._v("node")]),s._v(" de TreeNode y el TreeNode en si")])]),t("tr",[t("td",[s._v("node-contextmenu")]),t("td",[s._v("se lanza cuando en un nodo se hace click con el boton derecho")]),t("td",[s._v("cuatro parámetros: evento, el objeto nodo sobre el que se hizo click, la propiedad "),t("code",{pre:!0},[s._v("node")]),s._v(" del TreeNode, el TreeNode en si mismo")])]),t("tr",[t("td",[s._v("check-change")]),t("td",[s._v("se lanza cuando el estado de selección del nodo cambia")]),t("td",[s._v("tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados")])]),t("tr",[t("td",[s._v("check")]),t("td",[s._v("se activa al hacer clic en la casilla de selección de un nodo")]),t("td",[s._v("dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de status de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys")])]),t("tr",[t("td",[s._v("current-change")]),t("td",[s._v("cambia cuando el nodo actual cambia")]),t("td",[s._v("dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad "),t("code",{pre:!0},[s._v("node")]),s._v(" del TreeNode")])]),t("tr",[t("td",[s._v("node-expand")]),t("td",[s._v("se lanza cuando el nodo actual se abre")]),t("td",[s._v("tres parámetros: el objeto del nodo abierto, propiedad "),t("code",{pre:!0},[s._v("node")]),s._v(" de TreeNode y el TreeNode en si")])]),t("tr",[t("td",[s._v("node-collapse")]),t("td",[s._v("se lanza cuando el nodo actual se cierra")]),t("td",[s._v("tres parámetros: el objeto del nodo cerrado, propiedad "),t("code",{pre:!0},[s._v("node")]),s._v(" de TreeNode y el TreeNode en si")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Scoped slot")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("name")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }.")])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1513)},function(s,a,t){"use strict";function l(s){t(1514)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1516),n=t(0),r=l,v=n(null,e.a,!1,r,null,null);a.default=v.exports},function(s,a,t){var l=t(1515);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("244f2be4",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".demo-typo-box{height:200px;width:200px;position:relative;border:1px solid #eaeefb;font-size:40px;color:#1f2d3d;text-align:center;line-height:162px;padding-bottom:36px;box-sizing:border-box;display:inline-block;margin-right:17px;border-radius:4px}.demo-typo-box .name{position:absolute;bottom:0;width:100%;height:35px;border-top:1px solid #eaeefb;font-size:14px;color:#8492a6;line-height:35px;text-align:left;text-indent:10px;font-family:Helvetica Neue}.demo-typo-size .h1{font-size:20px}.demo-typo-size .h2{font-size:18px}.demo-typo-size .h3{font-size:16px}.demo-typo-size .text-regular{font-size:14px}.demo-typo-size .text-small{font-size:13px}.demo-typo-size .text-smaller{font-size:12px}.demo-typo-size .color-dark-light{color:#99a9bf}.typo-PingFang{font-family:PingFang SC}.typo-Hiragino{font-family:Hiragino Sans GB}.typo-Microsoft{font-family:Microsoft YaHei}.typo-Helvetica-Neue{font-family:Helvetica Neue}.typo-Helvetica{font-family:Helvetica}.typo-Arial{font-family:Arial}",""])},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement;s._self._c;return s._m(0)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"tipografia"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipografia","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tipografía")]),t("p",[s._v("Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.")]),t("h3",{attrs:{id:"fuente-en-chino"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fuente-en-chino","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fuente en chino")]),t("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n 和畅惠风\n "),t("div",{staticClass:"name"},[s._v("PingFang SC")])]),t("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n 和畅惠风\n "),t("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),t("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n 和畅惠风\n "),t("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),t("h3",{attrs:{id:"ingles-fuente-numerica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ingles-fuente-numerica","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inglés / Fuente Numérica")]),t("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n RGag\n "),t("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),t("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n RGag\n "),t("div",{staticClass:"name"},[s._v("Helvetica")])]),t("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n RGag\n "),t("div",{staticClass:"name"},[s._v("Arial")])]),t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-css"}},[t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("font-family")]),s._v(': "'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Neue")]),s._v('",'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(',"'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("PingFang")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("SC")]),s._v('","'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Hiragino")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Sans")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("GB")]),s._v('","'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Microsoft")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("YaHei")]),s._v('","微软雅黑",'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Arial")]),s._v(","),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("sans-serif")]),s._v(";\n")])]),t("h3",{attrs:{id:"convencion-de-fuentes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#convencion-de-fuentes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Convención de fuentes")]),t("table",{staticClass:"demo-typo-size"},[t("tbody",[t("tr",[t("td",{staticClass:"h1"},[s._v("Main Title")]),t("td",{staticClass:"h1"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("20px Extra large")])]),t("tr",[t("td",{staticClass:"h2"},[s._v("Title")]),t("td",{staticClass:"h2"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),t("tr",[t("td",{staticClass:"h3"},[s._v("Small Title")]),t("td",{staticClass:"h3"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),t("tr",[t("td",{staticClass:"text-regular"},[s._v("Body")]),t("td",{staticClass:"text-regular"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),t("tr",[t("td",{staticClass:"text-small"},[s._v("Body (small)")]),t("td",{staticClass:"text-small"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),t("tr",[t("td",{staticClass:"text-smaller"},[s._v("Supplementary text")]),t("td",{staticClass:"text-smaller"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}],n={render:l,staticRenderFns:e};a.a=n},function(s,a,t){s.exports=t(1518)},function(s,a,t){"use strict";function l(s){t(1519)}Object.defineProperty(a,"__esModule",{value:!0});var e=t(1521),n=t.n(e),r=t(1522),v=t(0),c=l,_=v(n.a,r.a,!1,c,null,null);a.default=_.exports},function(s,a,t){var l=t(1520);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);t(598)("f8dd5358",l,!0)},function(s,a,t){a=s.exports=t(111)(void 0),a.push([s.i,".upload-tip{color:#8492a6;font-size:12px;margin-top:7px}.demo-box{margin-bottom:24px}.demo-box .upload-demo{width:360px}.demo-box .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.demo-box .avatar-uploader .el-upload:focus,.demo-box .avatar-uploader .el-upload:hover{border-color:#409eff}.demo-box .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.demo-box .avatar-uploader .avatar{width:178px;height:178px;display:block}",""])},function(s,a,t){"use strict";a.__esModule=!0,a.default={data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList2:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList3:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],imageUrl:"",dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(s,a){console.log(s,a)},beforeUpload:function(s){return!(s.size>4e7)||(console.warn(s.name+" is too large!"),!1)},handlePreview:function(s){console.log(s)},handlePictureCardPreview:function(s){this.dialogImageUrl=s.url,this.dialogVisible=!0},submitUpload:function(){this.$refs.upload.submit()},handleAvatarSuccess:function(s,a){this.imageUrl=URL.createObjectURL(a.raw)},beforeAvatarUpload:function(s){var a="image/jpeg"===s.type,t=s.size/1024/1024<2;return a||this.$message.error("Avatar picture must be JPG format!"),t||this.$message.error("Avatar picture size can not exceed 2MB!"),a&&t},handleChange:function(s,a){this.fileList3=a.slice(-3)},handleExceed:function(s,a){this.$message.warning("You can upload up to 3 files. You selected "+s.length+" files this time, and "+(s.length+a.length)+" files totally")}}}},function(s,a,t){"use strict";var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Carga archivos haciendo clic o arrastrándolos.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Clic para subir archivo\n
    Solo archivos jpg/png con un tamaño menor de 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n },\n handleExceed(files, fileList) {\n this.$message.warning(`El límite es 3, haz seleccionado ${files.length} archivos esta vez, añade hasta ${files.length + fileList.length}`);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,multiple:"",limit:3,"on-exceed":s.handleExceed,"file-list":s.fileList}},[t("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Clic para subir archivo")]),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1),t("p",[s._v("Personalice el tipo y texto del botón utilizando la propiedad "),t("code",[s._v("slot")]),s._v(". Defina las propiedades "),t("code",[s._v("limit")]),s._v(" y "),t("code",[s._v("on-exceed")]),s._v(" para limitar el número máximo de archivos a subir y especifique un método para cuando el límite ha sido excedido.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":limit")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":on-exceed")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleExceed"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fileList"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Clic para subir archivo"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("Solo archivos jpg/png con un tamaño menor de 500kb"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fileList")]),s._v(": [{"),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file);\n },\n handleExceed(files, fileList) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.warning("),t("span",{attrs:{class:"hljs-string"}},[s._v("`El límite es 3, haz seleccionado "),t("span",{attrs:{class:"hljs-subst"}},[s._v("${files.length}")]),s._v(" archivos esta vez, añade hasta "),t("span",{attrs:{class:"hljs-subst"}},[s._v("${files.length + fileList.length}")]),s._v("`")]),s._v(");\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n imageUrl: ''\n };\n },\n methods: {\n handleAvatarSuccess(res, file) {\n this.imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n const isJPG = file.type === 'image/jpeg';\n const isLt2M = file.size / 1024 / 1024 < 2;\n\n if (!isJPG) {\n this.$message.error('La imagen debe estar en formato JPG!');\n }\n if (!isLt2M) {\n this.$message.error('La imagen excede los 2MB!');\n }\n return isJPG && isLt2M;\n }\n }\n }\n",style:"\n .avatar-uploader .el-upload {\n border: 1px dashed #d9d9d9;\n border-radius: 6px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n .avatar-uploader .el-upload:hover {\n border-color: #409EFF;\n }\n .avatar-uploader-icon {\n font-size: 28px;\n color: #8c939d;\n width: 178px;\n height: 178px;\n line-height: 178px;\n text-align: center;\n }\n .avatar {\n width: 178px;\n height: 178px;\n display: block;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?t("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):t("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"avatar-uploader"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":show-file-list")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":on-success")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleAvatarSuccess"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":before-upload")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"imageUrl"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"imageUrl"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"avatar"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-upload")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("border")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("1px")]),s._v(" dashed "),t("span",{attrs:{class:"hljs-number"}},[s._v("#d9d9d9")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("6px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("position")]),s._v(": relative;\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("overflow")]),s._v(": hidden;\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-upload")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":hover")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("border-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader-icon")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("28px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#8c939d")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("imageUrl")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleAvatarSuccess(res, file) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" isJPG = file.type === "),t("span",{attrs:{class:"hljs-string"}},[s._v("'image/jpeg'")]),s._v(";\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" isLt2M = file.size / "),t("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" / "),t("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" < "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(";\n\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!isJPG) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),t("span",{attrs:{class:"hljs-string"}},[s._v("'La imagen debe estar en formato JPG!'")]),s._v(");\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!isLt2M) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),t("span",{attrs:{class:"hljs-string"}},[s._v("'La imagen excede los 2MB!'")]),s._v(");\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" isJPG && isLt2M;\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n\n\n \n\n\n',script:"\n export default {\n data() {\n return {\n dialogImageUrl: '',\n dialogVisible: false\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePictureCardPreview(file) {\n this.dialogImageUrl = file.url;\n this.dialogVisible = true;\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[t("i",{staticClass:"el-icon-plus"})]),t("el-dialog",{attrs:{visible:s.dialogVisible},on:{"update:visible":function(a){s.dialogVisible=a}}},[t("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("list-type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"picture-card"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handlePictureCardPreview"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-plus"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100%"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dialogImageUrl"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("alt")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('""')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("dialogImageUrl")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("dialogVisible")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePictureCardPreview(file) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dialogVisible = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Clic para subir archivo\n
    Solo archivos jpg/png con un tamaño menor de 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("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"}},[t("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Clic para subir archivo")]),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fileList2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("list-type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"picture"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Clic para subir archivo"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("Solo archivos jpg/png con un tamaño menor de 500kb"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fileList2")]),s._v(": [{"),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(", "),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file);\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Clic para subir archivo\n
    Solo archivos jpg/png con un tamaño menor de 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList3: [{\n name: 'food.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }, {\n name: 'food2.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }]\n };\n },\n methods: {\n handleChange(file, fileList) {\n this.fileList3 = fileList.slice(-3);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[t("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Clic para subir archivo")]),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":on-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fileList3"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Clic para subir archivo"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("Solo archivos jpg/png con un tamaño menor de 500kb"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fileList3")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'finished'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'finished'")]),s._v("\n }]\n };\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(file, fileList) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fileList3 = fileList.slice("),t("span",{attrs:{class:"hljs-number"}},[s._v("-3")]),s._v(");\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),t("p",[s._v("Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Suelta tu archivo aquí o haz clic para cargar
    \n
    Solo archivos jpg/png con un tamaño menor de 500kb
    \n    \n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,multiple:""}},[t("i",{staticClass:"el-icon-upload"}),t("div",{staticClass:"el-upload__text"},[s._v("Suelta tu archivo aquí o "),t("em",[s._v("haz clic para cargar")])]),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("Solo archivos jpg/png con un tamaño menor de 500kb")])])],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("drag")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fileList"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__text"')]),s._v(">")]),s._v("Suelta tu archivo aquí o "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("em")]),s._v(">")]),s._v("haz clic para cargar"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("Solo archivos jpg/png con un tamaño menor de 500kb"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Selecciona un archivo\n Cargar al servidor\n
    Solo archivos jpg/png con un tamaño menor de 500kb
    \n    \n\n',script:"\n export default {\n methods: {\n submitUpload() {\n this.$refs.upload.submit();\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[t("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[s._v("Selecciona un archivo")]),t("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("Cargar al servidor")]),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":auto-upload")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"trigger"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Selecciona un archivo"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-left: 10px;"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"submitUpload"')]),s._v(">")]),s._v("Cargar al servidor"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("Solo archivos jpg/png con un tamaño menor de 500kb"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitUpload() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.upload.submit();\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},e=[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"carga-de-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-de-archivos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carga de archivos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"clic-para-cargar-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clic-para-cargar-archivos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Clic para cargar archivos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"cargar-avatar-de-usuario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargar-avatar-de-usuario","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cargar avatar de usuario")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Utilice el "),t("em",[s._v("hook")]),t("code",{pre:!0},[s._v("before-upload")]),s._v(" para limitar el formato de archivo y su tamaño.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"pared-de-fotografias"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pared-de-fotografias","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pared de fotografías")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Utilice la propiedad "),t("code",{pre:!0},[s._v("list-type")]),s._v(" para cambiar el estilo a un listado de archivos.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"lista-de-archivos-con-miniatura"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lista-de-archivos-con-miniatura","aria-hidden":"true"}},[s._v("¶")]),s._v(" Lista de archivos con miniatura")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"control-de-lista-de-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#control-de-lista-de-archivos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Control de lista de archivos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Utilice el "),t("em",[s._v("hook")]),t("code",{pre:!0},[s._v("on-change")]),s._v(" para controlar la funcionalidad de la lista de archivos subidos.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"arrastrar-para-cargar-archivo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arrastrar-para-cargar-archivo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arrastrar para cargar archivo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"carga-normal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-normal","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carga normal")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("action")]),t("td",[s._v("obligatorio, URL de la petición")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("headers")]),t("td",[s._v("cabeceras de la petición")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("multiple")]),t("td",[s._v("especifica si se permite subir múltiples archivos")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("data")]),t("td",[s._v("opciones adicionales de la petición")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("nombre clave del archivo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("file")])]),t("tr",[t("td",[s._v("with-credentials")]),t("td",[s._v("especifica si enviará cookies")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-file-list")]),t("td",[s._v("especifica si se debe mostrar la lista de archivos cargados")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("drag")]),t("td",[s._v("se especifica si se activará el modo arrastrar y soltar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("accept")]),t("td",[s._v("acepta "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("tipos de archivos")]),s._v(", puede no funcionar cuando "),t("code",{pre:!0},[s._v("thumbnail-mode")]),s._v(" esta en "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-preview")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado al hacer clic en los archivos subidos")]),t("td",[s._v("function(file)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-remove")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando los archivos son eliminados")]),t("td",[s._v("function(file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-success")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando los archivos fueron cargados correctamente")]),t("td",[s._v("function(response, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-error")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando han ocurrido algunos errores")]),t("td",[s._v("function(err, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-progress")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando se produce algún progreso")]),t("td",[s._v("function(event, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-change")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando el archivo seleccionado se carga correctamente o falla")]),t("td",[s._v("function(file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("before-upload")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado antes de que el archivo sea cargado. Si este devuelve "),t("code",{pre:!0},[s._v("true")]),s._v(" o "),t("code",{pre:!0},[s._v("Promise")]),s._v(" entonces será rechazado, la carga puede ser cancelada")]),t("td",[s._v("function(file)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("before-remove")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado antes de eliminar un archivo. Los parametros son el archivo y la lista de archivos. Si se devuelve "),t("code",{pre:!0},[s._v("false")]),s._v(" o se devuelve una "),t("code",{pre:!0},[s._v("Promise")]),s._v(" y que luego es rechazada, la eliminación será abortada.")]),t("td",[s._v("function(file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("thumbnail-mode")]),t("td",[s._v("especifica si se mostrará la miniatura")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("file-list")]),t("td",[s._v("archivos cargados por defecto, por ejemplo, [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[]")])]),t("tr",[t("td",[s._v("list-type")]),t("td",[s._v("tipo de lista de archivos")]),t("td",[s._v("string")]),t("td",[s._v("text/picture/picture-card")]),t("td",[s._v("text")])]),t("tr",[t("td",[s._v("auto-upload")]),t("td",[s._v("se especifica si se autocargan archivos")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("http-request")]),t("td",[s._v("sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica si se deshabilita la carga de archivos")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("limit")]),t("td",[s._v("número máximo de cargas permitidas")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-exceed")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando el límite ha sido excedido")]),t("td",[s._v("function(files, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("-")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[s._v("¶")]),s._v(" Métodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del método")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("clearFiles")]),t("td",[s._v("limpia la lista de archivos cargados (este método no esta soportado en el "),t("em",[s._v("hook")]),t("code",{pre:!0},[s._v("before-upload")]),s._v(")")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("abort")]),t("td",[s._v("cancela la petición de carga")]),t("td",[s._v("（ file: fileList's item ）")])])])])}],n={render:l,staticRenderFns:e};a.a=n}])); \ No newline at end of file diff --git a/2.2/index.html b/2.2/index.html index 76bf85b5d..8166dbce4 100644 --- a/2.2/index.html +++ b/2.2/index.html @@ -16,7 +16,7 @@
    - + - +