github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity
element/2.0/zh-CN.c666ec7.js

1 line
2.3 MiB
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

webpackJsonp([0],Array(590).concat([function(s,t,a){function l(s){return a(n(s))}function n(s){var t=e[s];if(!(t+1))throw new Error("Cannot find module '"+s+"'.");return t}var e={"./changelog.vue":622,"./component.vue":630,"./design.vue":635,"./guide.vue":639,"./index.vue":644,"./nav.vue":649,"./resource.vue":654};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=590},,,function(s,t,a){function l(s){return a(n(s))}function n(s){var t=e[s];if(!(t+1))throw new Error("Cannot find module '"+s+"'.");return t}var e={"./zh-CN/alert.md":730,"./zh-CN/badge.md":736,"./zh-CN/breadcrumb.md":743,"./zh-CN/button.md":746,"./zh-CN/card.md":751,"./zh-CN/carousel.md":757,"./zh-CN/cascader.md":763,"./zh-CN/checkbox.md":769,"./zh-CN/collapse.md":773,"./zh-CN/color-picker.md":779,"./zh-CN/color.md":785,"./zh-CN/container.md":790,"./zh-CN/custom-theme.md":796,"./zh-CN/date-picker.md":799,"./zh-CN/datetime-picker.md":805,"./zh-CN/dialog.md":811,"./zh-CN/dropdown.md":817,"./zh-CN/form.md":827,"./zh-CN/i18n.md":833,"./zh-CN/icon.md":838,"./zh-CN/input-number.md":844,"./zh-CN/input.md":850,"./zh-CN/installation.md":856,"./zh-CN/layout.md":859,"./zh-CN/loading.md":864,"./zh-CN/menu.md":870,"./zh-CN/message-box.md":876,"./zh-CN/message.md":880,"./zh-CN/notification.md":884,"./zh-CN/pagination.md":888,"./zh-CN/popover.md":894,"./zh-CN/progress.md":900,"./zh-CN/quickstart.md":905,"./zh-CN/radio.md":908,"./zh-CN/rate.md":912,"./zh-CN/select.md":918,"./zh-CN/slider.md":924,"./zh-CN/steps.md":930,"./zh-CN/switch.md":934,"./zh-CN/table.md":940,"./zh-CN/tabs.md":946,"./zh-CN/tag.md":950,"./zh-CN/time-picker.md":956,"./zh-CN/tooltip.md":962,"./zh-CN/transfer.md":968,"./zh-CN/transition.md":974,"./zh-CN/tree.md":980,"./zh-CN/typography.md":986,"./zh-CN/upload.md":991};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=593},,,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 n(){for(var s={},t=f.length,a=0;a<t;a++)s[f[a]]={distance:-1,parent:null};return s}function e(s){var t=n(),a=[s];for(t[s].distance=0;a.length;)for(var l=a.pop(),e=Object.keys(b[l]),r=e.length,v=0;v<r;v++){var _=e[v],c=t[_];-1===c.distance&&(c.distance=t[l].distance+1,c.parent=l,a.unshift(_))}return t}function r(s,t){return function(a){return t(s(a))}}function v(s,t){for(var a=[t[s].parent,s],l=b[t[s].parent][s],n=t[s].parent;t[n].parent;)a.unshift(t[n].parent),l=r(b[t[n].parent][n],l),n=t[n].parent;return l.conversion=a,l}function _(s){var t=function(t){return void 0===t||null===t?t:(arguments.length>1&&(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,n=0;n<l;n++)a[n]=Math.round(a[n]);return a};return"conversion"in s&&(t.conversion=s.conversion),t}Object.defineProperty(t,"__esModule",{value:!0});var i=Array.prototype.slice,p=l,h=function(s,t){for(var a,l=0,n=s.length;l<n;l++){var e=s[l];if(e.id===t){a=e;break}}if(a)return a;throw new Error("Cannot find "+t+" id in "+JSON.stringify(s))},o=function(s){var t={hsl:new RegExp(/^hsla?\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(,\s*[\d\.]+)?\s*\)$/),hex:new RegExp(/^#[a-f0-9]{3}([a-f0-9]{3})?$/,"i")};for(var a in t)if(t.hasOwnProperty(a)&&t[a].test(s))return a},d=function(s,t){for(var a=0,l=t.length;a<l;a++){var n=t[a]||{};for(var e in n)if(n.hasOwnProperty(e)){var r=n[e];void 0!==r&&(s[e]=r)}}return s},j={layers:[],max:20,reverseTilt:!1,perspective:1e3,easing:"cubic-bezier(.03, .98, .52, .99)",scale:1,speed:300,disabledAxis:"",reset:!0},g=function(s,t){var a=this;if("string"==typeof s&&(s=document.querySelector(s)),!s||1!==s.nodeType)throw new Error("Cannot find target dom to apply hover effects");t=d({},[j,t]),this.target=s,this.config=t,this.layers=[],p(s,function(s){if(1===s.nodeType){var l=s.getAttribute("data-hover-layer");if(l){var n=t.layers[Number(l)].multiple;if(!n)throw new Error("Missing translate config for "+l);a.layers.push(d({node:s,multiple:void 0===n?.2:n,reverseTranslate:!!t.layers[Number(l)].reverseTranslate},[a.constructor.getInitialTransformMatrix(s)]))}}}),this.target.style.transform="perspective("+this.config.perspective+"px)",this.addEventHandlers()};g.getInitialTransformMatrix=function(s){var t=window.getComputedStyle(s).transform.match(/matrix.*\((.*)\)/),a=[1,0,0,1,0,0],l=4,n=5;return t&&t[1]&&(a=t[1].split(/\s*\,\s*/)),16===a.length&&(l=12,n=13),{matrixArr:a,translateXIndex:l,translateYIndex:n}},g.prototype.addEventHandlers=function(){this.target.addEventListener("mouseenter",this.onMouseEnter.bind(this)),this.target.addEventListener("mousemove",this.onMouseMove.bind(this)),this.target.addEventListener("mouseleave",this.onMouseLeave.bind(this))},g.prototype.doTranslate=function(s,t,a){var l=["webkitTransform","msTransform","mozTransform","transform"],n=s.node,e=s.matrixArr,r=s.translateXIndex,v=s.translateYIndex,_=e.slice();_[r]=Number(_[r])+t,_[v]=Number(_[v])+a;var c=_.join(", ");l.forEach(function(s){n.style[s]=(6===e.length?"matrix":"matrix3d")+"("+c+")"})},g.prototype.translateLayers=function(s,t,a){var l=s.multiple,n=s.reverseTranslate,e=Math.floor(l*(.5*document.body.clientWidth+(n?-1:1)*t)),r=Math.floor(l*(.5*document.body.clientHeight+(n?-1:1)*a));this.doTranslate(s,e,r)},g.prototype.getValues=function(s){var t=(s.pageX-this.left)/this.width,a=(s.pageY-this.top)/this.height;return t=Math.min(Math.max(t,0),1),a=Math.min(Math.max(a,0),1),{tiltX:(this.config.reverseTilt?-1:1)*(this.config.max/2-t*this.config.max).toFixed(2),tiltY:(this.config.reverseTilt?-1:1)*(a*this.config.max-this.config.max/2).toFixed(2)}},g.prototype.setTransition=function(){var s=this;clearTimeout(this.transitionTimeout),this.target.style.transition=this.config.speed+"ms "+this.config.easing,this.transitionTimeout=setTimeout(function(t){s.target.style.transition=""},this.config.speed)},g.prototype.onMouseEnter=function(s){var t=this;this.width=this.target.offsetWidth,this.height=this.target.offsetHeight,this.left=this.target.offsetLeft,this.top=this.target.offsetTop,this.setTransition(),this.layers.forEach(function(a){a.node.style.transition=t.config.speed+"ms "+t.config.easing,t.translateLayers(a,s.clientX,s.clientY)}),setTimeout(function(){t.layers.forEach(function(s){s.node.style.transition="none"})},this.config.speed)},g.prototype.onMouseMove=function(s){var t=this,a=this.getValues(s);this.target.style.transform="\n perspective("+this.config.perspective+"px)\n rotateX("+("x"===this.config.disabledAxis?0:a.tiltY)+"deg)\n rotateY("+("y"===this.config.disabledAxis?0:a.tiltX)+"deg)\n scale3d("+this.config.scale+", "+this.config.scale+", "+this.config.scale+")\n ",window.requestAnimationFrame(function(a){t.layers.forEach(function(a){t.translateLayers(a,s.clientX,s.clientY)})})},g.prototype.onMouseLeave=function(){var s=this;!0===this.config.reset&&(this.setTransition(),this.target.style.transform="\n perspective("+this.config.perspective+"px)\n rotateX(0deg)\n rotateY(0deg)\n scale3d(1, 1, 1)\n ",this.layers.forEach(function(t){t.node.style.transition=s.config.speed+"ms "+s.config.easing,s.doTranslate(t,0,0)}))};var u={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},m=function(s,t){return t={exports:{}},s(t,t.exports),t.exports}(function(s){function t(s,t){return Math.pow(s[0]-t[0],2)+Math.pow(s[1]-t[1],2)+Math.pow(s[2]-t[2],2)}var a=u,l={};for(var n in a)a.hasOwnProperty(n)&&(l[a[n]]=n);var e=s.exports={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};for(var r in e)if(e.hasOwnProperty(r)){if(!("channels"in e[r]))throw new Error("missing channels property: "+r);if(!("labels"in e[r]))throw new Error("missing channel labels property: "+r);if(e[r].labels.length!==e[r].channels)throw new Error("channel and label counts mismatch: "+r);var v=e[r].channels,_=e[r].labels;delete e[r].channels,delete e[r].labels,Object.defineProperty(e[r],"channels",{value:v}),Object.defineProperty(e[r],"labels",{value:_})}e.rgb.hsl=function(s){var t,a,l,n=s[0]/255,e=s[1]/255,r=s[2]/255,v=Math.min(n,e,r),_=Math.max(n,e,r),c=_-v;return _===v?t=0:n===_?t=(e-r)/c:e===_?t=2+(r-n)/c:r===_&&(t=4+(n-e)/c),t=Math.min(60*t,360),t<0&&(t+=360),l=(v+_)/2,a=_===v?0:l<=.5?c/(_+v):c/(2-_-v),[t,100*a,100*l]},e.rgb.hsv=function(s){var t,a,l,n=s[0],e=s[1],r=s[2],v=Math.min(n,e,r),_=Math.max(n,e,r),c=_-v;return a=0===_?0:c/_*1e3/10,_===v?t=0:n===_?t=(e-r)/c:e===_?t=2+(r-n)/c:r===_&&(t=4+(n-e)/c),t=Math.min(60*t,360),t<0&&(t+=360),l=_/255*1e3/10,[t,a,l]},e.rgb.hwb=function(s){var t=s[0],a=s[1],l=s[2],n=e.rgb.hsl(s)[0],r=1/255*Math.min(t,Math.min(a,l));return l=1-1/255*Math.max(t,Math.max(a,l)),[n,100*r,100*l]},e.rgb.cmyk=function(s){var t,a,l,n,e=s[0]/255,r=s[1]/255,v=s[2]/255;return n=Math.min(1-e,1-r,1-v),t=(1-e-n)/(1-n)||0,a=(1-r-n)/(1-n)||0,l=(1-v-n)/(1-n)||0,[100*t,100*a,100*l,100*n]},e.rgb.keyword=function(s){var n=l[s];if(n)return n;var e,r=1/0;for(var v in a)if(a.hasOwnProperty(v)){var _=a[v],c=t(s,_);c<r&&(r=c,e=v)}return e},e.keyword.rgb=function(s){return a[s]},e.rgb.xyz=function(s){var t=s[0]/255,a=s[1]/255,l=s[2]/255;return t=t>.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)]},e.rgb.lab=function(s){var t,a,l,n=e.rgb.xyz(s),r=n[0],v=n[1],_=n[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]},e.hsl.rgb=function(s){var t,a,l,n,e,r=s[0]/360,v=s[1]/100,_=s[2]/100;if(0===v)return e=255*_,[e,e,e];a=_<.5?_*(1+v):_+v-_*v,t=2*_-a,n=[0,0,0];for(var c=0;c<3;c++)l=r+1/3*-(c-1),l<0&&l++,l>1&&l--,e=6*l<1?t+6*(a-t)*l:2*l<1?a:3*l<2?t+(a-t)*(2/3-l)*6:t,n[c]=255*e;return n},e.hsl.hsv=function(s){var t,a,l=s[0],n=s[1]/100,e=s[2]/100,r=n,v=Math.max(e,.01);return e*=2,n*=e<=1?e:2-e,r*=v<=1?v:2-v,a=(e+n)/2,t=0===e?2*r/(v+r):2*n/(e+n),[l,100*t,100*a]},e.hsv.rgb=function(s){var t=s[0]/60,a=s[1]/100,l=s[2]/100,n=Math.floor(t)%6,e=t-Math.floor(t),r=255*l*(1-a),v=255*l*(1-a*e),_=255*l*(1-a*(1-e));switch(l*=255,n){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]}},e.hsv.hsl=function(s){var t,a,l,n=s[0],e=s[1]/100,r=s[2]/100,v=Math.max(r,.01);return l=(2-e)*r,t=(2-e)*v,a=e*v,a/=t<=1?t:2-t,a=a||0,l/=2,[n,100*a,100*l]},e.hwb.rgb=function(s){var t,a,l,n,e=s[0]/360,r=s[1]/100,v=s[2]/100,_=r+v;_>1&&(r/=_,v/=_),t=Math.floor(6*e),a=1-v,l=6*e-t,0!=(1&t)&&(l=1-l),n=r+l*(a-r);var c,i,p;switch(t){default:case 6:case 0:c=a,i=n,p=r;break;case 1:c=n,i=a,p=r;break;case 2:c=r,i=a,p=n;break;case 3:c=r,i=n,p=a;break;case 4:c=n,i=r,p=a;break;case 5:c=a,i=r,p=n}return[255*c,255*i,255*p]},e.cmyk.rgb=function(s){var t,a,l,n=s[0]/100,e=s[1]/100,r=s[2]/100,v=s[3]/100;return t=1-Math.min(1,n*(1-v)+v),a=1-Math.min(1,e*(1-v)+v),l=1-Math.min(1,r*(1-v)+v),[255*t,255*a,255*l]},e.xyz.rgb=function(s){var t,a,l,n=s[0]/100,e=s[1]/100,r=s[2]/100;return t=3.2406*n+-1.5372*e+-.4986*r,a=-.9689*n+1.8758*e+.0415*r,l=.0557*n+-.204*e+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]},e.xyz.lab=function(s){var t,a,l,n=s[0],e=s[1],r=s[2];return n/=95.047,e/=100,r/=108.883,n=n>.008856?Math.pow(n,1/3):7.787*n+16/116,e=e>.008856?Math.pow(e,1/3):7.787*e+16/116,r=r>.008856?Math.pow(r,1/3):7.787*r+16/116,t=116*e-16,a=500*(n-e),l=200*(e-r),[t,a,l]},e.lab.xyz=function(s){var t,a,l,n=s[0],e=s[1],r=s[2];a=(n+16)/116,t=e/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]},e.lab.lch=function(s){var t,a,l,n=s[0],e=s[1],r=s[2];return t=Math.atan2(r,e),a=360*t/2/Math.PI,a<0&&(a+=360),l=Math.sqrt(e*e+r*r),[n,l,a]},e.lch.lab=function(s){var t,a,l,n=s[0],e=s[1];return l=s[2]/360*2*Math.PI,t=e*Math.cos(l),a=e*Math.sin(l),[n,t,a]},e.rgb.ansi16=function(s){var t=s[0],a=s[1],l=s[2],n=1 in arguments?arguments[1]:e.rgb.hsv(s)[2];if(0===(n=Math.round(n/50)))return 30;var r=30+(Math.round(l/255)<<2|Math.round(a/255)<<1|Math.round(t/255));return 2===n&&(r+=60),r},e.hsv.ansi16=function(s){return e.rgb.ansi16(e.hsv.rgb(s),s[2])},e.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)},e.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]},e.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]},e.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},e.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]},e.rgb.hcg=function(s){var t,a,l=s[0]/255,n=s[1]/255,e=s[2]/255,r=Math.max(Math.max(l,n),e),v=Math.min(Math.min(l,n),e),_=r-v;return t=_<1?v/(1-_):0,a=_<=0?0:r===l?(n-e)/_%6:r===n?2+(e-l)/_:4+(l-n)/_+4,a/=6,a%=1,[360*a,100*_,100*t]},e.hsl.hcg=function(s){var t=s[1]/100,a=s[2]/100,l=1,n=0;return l=a<.5?2*t*a:2*t*(1-a),l<1&&(n=(a-.5*l)/(1-l)),[s[0],100*l,100*n]},e.hsv.hcg=function(s){var t=s[1]/100,a=s[2]/100,l=t*a,n=0;return l<1&&(n=(a-l)/(1-l)),[s[0],100*l,100*n]},e.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 n=[0,0,0],e=t%1*6,r=e%1,v=1-r,_=0;switch(Math.floor(e)){case 0:n[0]=1,n[1]=r,n[2]=0;break;case 1:n[0]=v,n[1]=1,n[2]=0;break;case 2:n[0]=0,n[1]=1,n[2]=r;break;case 3:n[0]=0,n[1]=v,n[2]=1;break;case 4:n[0]=r,n[1]=0,n[2]=1;break;default:n[0]=1,n[1]=0,n[2]=v}return _=(1-a)*l,[255*(a*n[0]+_),255*(a*n[1]+_),255*(a*n[2]+_)]},e.hcg.hsv=function(s){var t=s[1]/100,a=s[2]/100,l=t+a*(1-t),n=0;return l>0&&(n=t/l),[s[0],100*n,100*l]},e.hcg.hsl=function(s){var t=s[1]/100,a=s[2]/100,l=a*(1-t)+.5*t,n=0;return l>0&&l<.5?n=t/(2*l):l>=.5&&l<1&&(n=t/(2*(1-l))),[s[0],100*n,100*l]},e.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)]},e.hwb.hcg=function(s){var t=s[1]/100,a=s[2]/100,l=1-a,n=l-t,e=0;return n<1&&(e=(l-n)/(1-n)),[s[0],100*n,100*e]},e.apple.rgb=function(s){return[s[0]/65535*255,s[1]/65535*255,s[2]/65535*255]},e.rgb.apple=function(s){return[s[0]/255*65535,s[1]/255*65535,s[2]/255*65535]},e.gray.rgb=function(s){return[s[0]/100*255,s[0]/100*255,s[0]/100*255]},e.gray.hsl=e.gray.hsv=function(s){return[0,0,s[0]]},e.gray.hwb=function(s){return[0,100,s[0]]},e.gray.cmyk=function(s){return[0,0,0,s[0]]},e.gray.lab=function(s){return[s[0],0,0]},e.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},e.rgb.gray=function(s){return[(s[0]+s[1]+s[2])/3/255*100]}}),b=m,f=Object.keys(b),y=function(s){for(var t=e(s),a={},l=Object.keys(t),n=l.length,r=0;r<n;r++){var _=l[r];null!==t[_].parent&&(a[_]=v(_,t))}return a},x=m,k=y,w={};Object.keys(x).forEach(function(s){w[s]={},Object.defineProperty(w[s],"channels",{value:x[s].channels}),Object.defineProperty(w[s],"labels",{value:x[s].labels});var t=k(s);Object.keys(t).forEach(function(a){var l=t[a];w[s][a]=c(l),w[s][a].raw=_(l)})});var C=w,A=function(s,t,a,l){function n(){function n(){r=Number(new Date),a.apply(_,i)}function v(){e=void 0}var _=this,c=Number(new Date)-r,i=arguments;l&&!e&&n(),e&&clearTimeout(e),void 0===l&&c>s?n():!0!==t&&(e=setTimeout(l?v:n,void 0===l?s-c:s))}var e,r=0;return"boolean"!=typeof t&&(l=a,a=t,t=void 0),n},I={stageSwitchTransition:800,stageSwitchDelay:0,stageSwitchEasing:"cubic-bezier(.86, 0, .07, 1)",disableAfterSwitching:500,stages:[]},z={scrollNumber:1,transition:200,easing:"ease",items:[]},M=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({},[I,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;p(this.target,function(t){if(1===t.nodeType){var a=t.getAttribute("data-scroll-stage-id");if(a){var l=h(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({},[z,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){p(s.node,function(t){if(1===t.nodeType){var a=t.getAttribute("data-scroll-item-id");if(a){var l=h(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(M)||[]).map(function(s){return Number(s)}),a.endNumbers=(a.end.match(M)||[]).map(function(s){return Number(s)}),a.strings=a.start.split(M)})})},E.getCurrentStyleValue=function(s,t){var a=s.startAt,l=s.endAt,n=s.startNumbers,e=s.endNumbers,r=s.strings,v=s.isColor;t=Math.min(l,Math.max(a,t));var _=r[0],c=-1;return n&&n.length>0&&n.forEach(function(s,n){/rgba/.test(r[n])&&(c=n+3);var i=s+(t-a)*(e[n]-s)/(l-a);v&&n!==c&&(i=Math.round(i)),_+=""+i+r[n+1]}),_},E.processColorValues=function(s){["start","end"].forEach(function(t){var a=s[t],l=o(a);if(l){if(s.isColor=!0,"hex"===l)a="\n rgb("+C.hex.rgb(a).join(",")+")\n ";else if("hsl"===l){var n=a.match(/hsla?\((.*)\)/)[1].split(/\s*,\s*/).map(function(s){return parseFloat(s)}),e=n[0],r=n[1],v=n[2],_=n[3];a="\n rgba("+C.hsl.rgb([e,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=h(this.stages,s)||this.stages[0],n=this.stages.findIndex(function(s){return s===l});t?(l.step=a<n?0:Number(l.stageConfig.scrollNumber),this.activeStage=l,this.handleStepChange(!1,!1)):(this.activeStage=l,this.handleStepChange(!1,!1))}},E.prototype.handleActiveStageChange=function(){var s=this;clearTimeout(this.switchingTimeout),this.switching=!0,this.stages.forEach(function(t){N.forEach(function(a){var l=a.length?a+"Transform":"transform";t.node.style[l]="translateY("+100*-s.activeStageIndex+"%)"})}),this.switchingTimeout=setTimeout(function(t){s.switching=!1},Number(this.config.stageSwitchTransition)+Number(this.config.disableAfterSwitching))},E.prototype.setStep=function(s){var t=typeof s;if("number"!==t)throw new Error("step should be a number, got "+t);if(s<0||s>Number(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,n=this.activeStage.stageConfig,e=this.activeStageIndex;if(l>Number(n.scrollNumber)){if(e===this.stages.length-1)return this.target.dispatchEvent(new CustomEvent("scroll-out",{detail:{direction:"bottom"}})),void(this.activeStage.step=Number(n.scrollNumber));this.setActiveStage(this.stages[e+1].id,!0)}else if(l<0){if(0===e)return this.target.dispatchEvent(new CustomEvent("scroll-out",{detail:{direction:"top"}})),void(this.activeStage.step=0);this.setActiveStage(this.stages[e-1].id,!0)}else clearTimeout(this.animatingTimeout),this.animating=!0,n.items.forEach(function(t){t.node.style.transition=s?n.transition+"ms "+n.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:n},current:l}})),this.animatingTimeout=setTimeout(function(s){a.animating=!1},s?Number(n.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=g,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){s.exports="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTQ4LjMyIDIyNi42OSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgaXNvbGF0aW9uOiBpc29sYXRlOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6IHVybCgjcmFkaWFsLWdyYWRpZW50KTsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiB1cmwoI2xpbmVhci1ncmFkaWVudCk7CiAgICAgIH0KCiAgICAgIC5jbHMtNCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMik7CiAgICAgIH0KCiAgICAgIC5jbHMtNSB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtNiB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNCk7CiAgICAgIH0KCiAgICAgIC5jbHMtNyB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNSk7CiAgICAgIH0KCiAgICAgIC5jbHMtOCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNik7CiAgICAgIH0KCiAgICAgIC5jbHMtOSB7CiAgICAgICAgb3BhY2l0eTogMC43OwogICAgICB9CgogICAgICAuY2xzLTExLCAuY2xzLTkgewogICAgICAgIG1peC1ibGVuZC1tb2RlOiBtdWx0aXBseTsKICAgICAgfQoKICAgICAgLmNscy0xMCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMTIgewogICAgICAgIGZpbGw6IHVybCgjbGluZWFyLWdyYWRpZW50LTgpOwogICAgICB9CgogICAgICAuY2xzLTEzIHsKICAgICAgICBmaWxsOiB1cmwoI2xpbmVhci1ncmFkaWVudC05KTsKICAgICAgfQoKICAgICAgLmNscy0xNCB7CiAgICAgICAgZmlsbDogIzNjMmUzNjsKICAgICAgfQoKICAgICAgLmNscy0xNSB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMTApOwogICAgICB9CgogICAgICAuY2xzLTE2IHsKICAgICAgICBmaWxsOiB1cmwoI3JhZGlhbC1ncmFkaWVudC0yKTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsLWdyYWRpZW50IiBjeD0iNzQuOTMiIGN5PSIxMTcuODciIHI9Ijg2LjM5IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMjIuNzIpIHNjYWxlKDEgMS4wNykiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjMyIiBzdG9wLWNvbG9yPSIjZTRkY2UxIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40OCIgc3RvcC1jb2xvcj0iI2UxZGFkZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNTkiIHN0b3AtY29sb3I9IiNkOWQzZGEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjY4IiBzdG9wLWNvbG9yPSIjY2FjN2QyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC43NiIgc3RvcC1jb2xvcj0iI2I1YjZjNiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNzkiIHN0b3AtY29sb3I9IiNhYWFkYzAiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNmY2Zjg1Ii8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSIzOC44NSIgeTE9IjEyMi41MyIgeDI9IjEwOC4xOCIgeTI9IjEwOC4zOCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNlNGRjZTEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjE5IiBzdG9wLWNvbG9yPSIjZDdkMGQ3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41MyIgc3RvcC1jb2xvcj0iI2I1YjJiZSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuOTciIHN0b3AtY29sb3I9IiM4MDgyOTYiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0yIiB4MT0iMzIuMjUiIHkxPSI2NC43IiB4Mj0iMTQ4LjQ0IiB5Mj0iNjQuNyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMzIiIHN0b3AtY29sb3I9IiNlNGRjZTEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ5IiBzdG9wLWNvbG9yPSIjZTFkYWRmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC42IiBzdG9wLWNvbG9yPSIjZDlkM2RhIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC42OSIgc3RvcC1jb2xvcj0iI2NhYzdkMiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNzgiIHN0b3AtY29sb3I9IiNiNWI2YzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjgxIiBzdG9wLWNvbG9yPSIjYWFhZGMwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzZmNmY4NSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTMiIHgxPSIxMzkuMTEiIHkxPSI2OC4zNCIgeDI9IjEzOS4xMSIgeTI9IjEuMTciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjEyIiBzdG9wLWNvbG9yPSIjODg4YWEwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NCIgc3RvcC1jb2xvcj0iIzcxNmY4YSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuODkiIHN0b3AtY29sb3I9IiM2MzVkN2MiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC00IiB4MT0iMTExLjk0IiB5MT0iMTYuMDUiIHgyPSIxMzUuMzYiIHkyPSIxNi4wNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjU0IiBzdG9wLWNvbG9yPSIjNTM0YTY3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC44OSIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTUiIHgxPSI2NzUyLjA0IiB5MT0iNjguMzQiIHgyPSI2NzUyLjA0IiB5Mj0iLTMuNDUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTEsIDAsIDAsIDEsIDY3ODcuNjgsIDApIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xOSIgc3RvcC1jb2xvcj0iI2U0ZGNlMSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNDIiIHN0b3AtY29sb3I9IiNjMmJhYzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjkyIiBzdG9wLWNvbG9yPSIjNmI2NTgyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC45NyIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTYiIHgxPSIzOS4zOSIgeTE9IjE2LjA1IiB4Mj0iNjIuODIiIHkyPSIxNi4wNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjAyIiBzdG9wLWNvbG9yPSIjM2QzMjRjIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zNSIgc3RvcC1jb2xvcj0iIzUyNGE2NiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNjUiIHN0b3AtY29sb3I9IiM1ZjU4NzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjg5IiBzdG9wLWNvbG9yPSIjNjM1ZDdjIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQtNyIgeDE9Ijc5LjY2IiB5MT0iMjI5LjA1IiB4Mj0iNzkuNjYiIHkyPSIxOTQuODIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjAzIiBzdG9wLWNvbG9yPSIjODA4Mjk2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zMSIgc3RvcC1jb2xvcj0iI2I3YjhjMyIgc3RvcC1vcGFjaXR5PSIwLjc4Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC43OSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC04IiB4MT0iODcuMzgiIHkxPSIxMTcuODQiIHgyPSI4Ny4zOCIgeTI9IjQxLjc3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2UzZGRkZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4wNCIgc3RvcC1jb2xvcj0iI2NiYzVjZCIgc3RvcC1vcGFjaXR5PSIwLjEyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xNSIgc3RvcC1jb2xvcj0iIzlkOTdhOSIgc3RvcC1vcGFjaXR5PSIwLjM3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4yNSIgc3RvcC1jb2xvcj0iIzdiNzU4ZiIgc3RvcC1vcGFjaXR5PSIwLjU0Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zNSIgc3RvcC1jb2xvcj0iIzY3NjE3ZiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40NSIgc3RvcC1jb2xvcj0iIzYwNWE3YSIgc3RvcC1vcGFjaXR5PSIwLjY4Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NCIgc3RvcC1jb2xvcj0iIzU3NTA3MCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzM4MmU0YSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTkiIHgxPSIxMTM1Ny4yMiIgeTE9Ijc4LjgiIHgyPSIxMTM2MS40NiIgeTI9IjU4LjQ5IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAxLCAxMTQxOS4zNCwgMCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjA3IiBzdG9wLWNvbG9yPSIjMjhmZmZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40MSIgc3RvcC1jb2xvcj0iIzUxZDJmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuOCIgc3RvcC1jb2xvcj0iIzdiYTNmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4YjkxZmYiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0xMCIgeDE9IjExMyIgeTE9Ijc4LjgiIHgyPSIxMTcuMjQiIHkyPSI1OC40OSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAwLCAwKSIgeGxpbms6aHJlZj0iI2xpbmVhci1ncmFkaWVudC05Ii8+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9InJhZGlhbC1ncmFkaWVudC0yIiBjeD0iMzYuMDkiIGN5PSIxMjQuNzEiIHI9IjM2LjEzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xMSIgc3RvcC1jb2xvcj0iIzYzNWQ3YyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMzUiIHN0b3AtY29sb3I9IiM1ZjU4NzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjY1IiBzdG9wLWNvbG9yPSIjNTI0YTY2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC45OCIgc3RvcC1jb2xvcj0iIzNkMzI0YyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzYzMxNGIiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgPC9kZWZzPgogIDx0aXRsZT5Bc3NldCAzPC90aXRsZT4KICA8ZyBjbGFzcz0iY2xzLTEiPgogICAgPGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+CiAgICAgIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+CiAgICAgICAgPGc+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xMzguMTMsMTI4LjI3Yy00LjctOS43OC0xMS4yOS0yMS4yOC05Ljc1LTMzLjU1YTE1LjgzLDE1LjgzLDAsMCwxLDMuMjYtOC4yNkE2NS4xMiw2NS4xMiwwLDAsMSwxMTQuNzUsOTlhNjQuMSw2NC4xLDAsMCwxLTYuMTEsMi43Niw2Ni42MSw2Ni42MSwwLDAsMC0xNC4zNSw5LjQyYy0xMy40MywxMS43LTI2LjIxLDQ0LjM5LTQ4LjUxLDUwLjZoMGEyMy45LDIzLjksMCwwLDEtOS44MSwyYy05LjQxLS4wNy0yMC40LTYuMjEtMjYuMjYtMTUuNDNDMSwxMzQuNjgsMy41OCwxMTUuODUsOS40OSwxMDMuODFjLS4xOC4zNy0uMzcuNzQtLjU1LDEuMTNhMTAyLjUxLDEwMi41MSwwLDAsMC00LjIsMTAuNDJ2MEE4Ni4zNyw4Ni4zNywwLDAsMCwwLDE0My42OWMwLDQ1Ljg0LDM1LjQ5LDgzLDc5LjI3LDgzLDExLjE5LDAsMjktMy4zOCw0My42Ni0xMy42MWE1Ny43NSw1Ny43NSwwLDAsMCwyMi41Ny0zMkMxNTEuNTQsMTU4LjU4LDE0NC45NCwxNDIuNDUsMTM4LjEzLDEyOC4yN1oiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTUxLjQ2LDE1OC4zN2EyNywyNywwLDAsMS01LjY3LDMuMzhoMGMyMi4zLTYuMjEsMzUuMDctMzguOSw0OC41MS01MC42YTY2LjYxLDY2LjYxLDAsMCwxLDE0LjM1LTkuNDIsNTguNjcsNTguNjcsMCwwLDEtMjEuMjYsNC4wOWMtMTkuNzUsMC0zNy43NS0xMC40OS00OC4zMS0yNCwxLDEuMzksMTMsMTUuNDYsMjIuMjksNDMuNzJBMzAsMzAsMCwwLDEsNTEuNDYsMTU4LjM3WiIvPgogICAgICAgICAgPHBhdGggY2xhc3M9ImNscy00IiBkPSJNMTQ1LjMzLDU5LjU2Yy0yLjA4LDIyLjI5LTI4LjI2LDQ2LjI2LTU4LDQ2LjI2LTI5Ljk1LDAtNTUuODgtMjQuMTItNTgtNDYuMjYtMS40NS0xNS42LDcuMzQtMzYsNTgtMzZTMTQ2Ljc4LDQ0LDE0NS4zMyw1OS41NloiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTEzNS4zNiwwaDBhNTEuNTksNTEuNTksMCwwLDAtNC42OCwzMi4xQTM3LjIxLDM3LjIxLDAsMCwxLDEzNCwzNC4yNGMxMCw3LjIzLDEyLjEyLDE3LDExLjM0LDI1LjMyYTM1LjIsMzUuMiwwLDAsMS0xLjYsNy42MUE3My40NSw3My40NSwwLDAsMCwxNDIuMDgsMTIsNzEuMTgsNzEuMTgsMCwwLDAsMTM1LjM2LDBaIi8+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Ik0xMzAuNjgsMzIuMUE1MS41OSw1MS41OSwwLDAsMSwxMzUuMzYsMGgwYTU3LjkyLDU3LjkyLDAsMCwwLTkuNDEsNi44Nyw1OS44LDU5LjgsMCwwLDAtMTQsMTguNzVxMy4zNS42NCw2LjI5LDEuNDVBNTMuMDksNTMuMDksMCwwLDEsMTMwLjY4LDMyLjFaIi8+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTciIGQ9Ik0zOS4zOSwwaDBhNTEuNTksNTEuNTksMCwwLDEsNC42OCwzMi4xLDM3LjIxLDM3LjIxLDAsMCwwLTMuMzEsMi4xNGMtMTAsNy4yMy0xMi4xMiwxNy0xMS4zNCwyNS4zMkEzNS4yLDM1LjIsMCwwLDAsMzEsNjcuMTcsNzMuNDUsNzMuNDUsMCwwLDEsMzIuNjcsMTIsNzEuMTgsNzEuMTgsMCwwLDEsMzkuMzksMFoiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtOCIgZD0iTTQ4LjgxLDYuODdBNTcuOTIsNTcuOTIsMCwwLDAsMzkuMzksMGgwYTUxLjU5LDUxLjU5LDAsMCwxLDQuNjgsMzIuMSw1My4wOSw1My4wOSwwLDAsMSwxMi40NS01cTIuOTQtLjgyLDYuMjktMS40NUE1OS44LDU5LjgsMCwwLDAsNDguODEsNi44N1oiLz4KICAgICAgICAgIDxnIGNsYXNzPSJjbHMtOSI+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMTAiIGQ9Ik04NC4yNCwxODIuNmMtMjYuMDgsMC00OS41Niw1LjQyLTY2LDE0LjA4LDE0LjU0LDE4LjMzLDM2LjQ3LDMwLDYxLDMwLDExLjE5LDAsMjktMy4zOCw0My42Ni0xMy42MUE1OC44MSw1OC44MSwwLDAsMCwxNDEsMTkyLjQ3QzEyNS41NiwxODYuMywxMDUuNzksMTgyLjYsODQuMjQsMTgyLjZaIi8+CiAgICAgICAgICA8L2c+CiAgICAgICAgICA8Zz4KICAgICAgICAgICAgPGcgY2xhc3M9ImNscy0xMSI+CiAgICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xMiIgZD0iTTEzOC41MSw1Mi45NGMtLjU2LTIuOTQtMi01LjE5LTUtNS44OC03Ljg4LTEuODUtMjcsOS44NC0zNy44LDE1LjM0LTQsMi4wNi02LjE2LDMuMDUtOC4zNCwzcy00LjMxLS45NC04LjM0LTNjLTEwLjc3LTUuNS0yOS45Mi0xNy4xOC0zNy44LTE1LjM0LTMsLjctNC40NCwyLjk0LTUsNS44OC0xLDUuMTYuMzUsMTgsOS44OSwyNy40OSw3LjE0LDcuMTEsMTYuNjgsMTAuNDYsMjQuNjksMTIuNzFsLjE4LjA4YTQuMiw0LjIsMCwwLDAtLjA5Ljg4YzAsMy4yOCwzLjgzLDUuOTQsOC41Niw1Ljk0LDIuMzQsMCw2LjM1LS42NSw3LjktMS43MWgwYzEuNTUsMS4wNiw1LjU2LDEuNzEsNy45LDEuNzEsNC43MywwLDguNTYtMi42Niw4LjU2LTUuOTRhNC4yLDQuMiwwLDAsMC0uMDktLjg4bC4xOC0uMDhjOC0yLjI1LDE3LjU2LTUuNiwyNC42OS0xMi43MUMxMzguMTYsNzAuOTIsMTM5LjQ5LDU4LjEsMTM4LjUxLDUyLjk0WiIvPgogICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMTMiIGQ9Ik03NS4yNiw3NS4zNUM2NC41Niw4Ni44NSw0Ny44MSw3Ny4wOSw0NSw2My4yOGMtMS44My05LjA3LDMuNjMtNy43Myw4LjcxLTUuNjdDNjAuMTQsNjAuMiw2OC44NCw2Ni4yNyw3NS4yNiw3NS4zNVoiLz4KICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xNCIgZD0iTTYwLjQzLDY4LjI2YTE1LjE2LDE1LjE2LDAsMCwxLTIuMTksOCwxNS41NiwxNS41NiwwLDAsMSwwLTE1LjkyQTE1LjE2LDE1LjE2LDAsMCwxLDYwLjQzLDY4LjI2WiIvPgogICAgICAgICAgICA8cGF0aCBkPSJNODcuMzYsODYuNjRhOC4xNSw4LjE1LDAsMCwwLTYuMjcsMi40OWM4LjI1LDUuMTcsNC4zMSw1LjE3LDEyLjU1LDBBOC4xNSw4LjE1LDAsMCwwLDg3LjM2LDg2LjY0WiIvPgogICAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTE1IiBkPSJNOTkuODYsNzUuMzVjMTAuNjksMTEuNSwyNy40NSwxLjc0LDMwLjIzLTEyLjA3LDEuODMtOS4wNy0zLjYzLTcuNzMtOC43MS01LjY3QzExNSw2MC4yLDEwNi4yOCw2Ni4yNyw5OS44Niw3NS4zNVoiLz4KICAgICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xNCIgZD0iTTExNC42OSw2OC4yNmExNS4xNiwxNS4xNiwwLDAsMCwyLjE5LDgsMTUuNTYsMTUuNTYsMCwwLDAsMC0xNS45MkExNS4xNiwxNS4xNiwwLDAsMCwxMTQuNjksNjguMjZaIi8+CiAgICAgICAgICA8L2c+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTE2IiBkPSJNOS43MSwxNDguMzVjNS44Niw5LjIyLDE2Ljg1LDE1LjM3LDI2LjI2LDE1LjQzYTIzLjcsMjMuNywwLDAsMCw4LjIxLTEuNDFsMCwwYy0xNSw0LjE4LTE5LjMyLTI1LjE2LTEwLjkyLTQzLjA2djBjMS4wOS0zLjM4LDIuMzUtNi4zNCwzLjQyLTguODMuMzctLjg2LDIuNTMtNS4xNSwyLjA5LTkuOC0uODQtOS0xNC0xNy4zMy0yNC01LjM3QTQ0LjUyLDQ0LjUyLDAsMCwwLDkuMzksMTA0QzMuNTUsMTE2LjA2LDEuMDgsMTM0Ljc2LDkuNzEsMTQ4LjM1WiIvPgogICAgICAgIDwvZz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg=="},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=["upload","error","success","warning","sort-down","sort-up","arrow-left","circle-plus","circle-plus-outline","arrow-down","arrow-right","arrow-up","back","circle-close","date","circle-close-outline","caret-left","caret-bottom","caret-top","caret-right","close","d-arrow-left","check","delete","d-arrow-right","document","d-caret","edit-outline","download","goods","search","info","message","edit","location","loading","location-outline","menu","minus","bell","mobile-phone","news","more","more-outline","phone","phone-outline","picture","picture-outline","plus","printer","rank","refresh","question","remove","share","star-on","setting","circle-check","service","sold-out","remove-outline","star-off","circle-check-outline","tickets","sort","zoom-in","time","view","upload2","zoom-out"]},function(s,t,a){"use strict";function l(s){a(623)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(625),e=a.n(n),r=a(629),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(624);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("306347c8",l,!0)},function(s,t,a){t=s.exports=a(109)(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(626),n=function(s){return s&&s.__esModule?s:{default:s}}(l);t.default={components:{ChangeLog:n.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),n='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=t.length,r=2;r<e;r++){var v=t[r];a=t[r].querySelector("a"),a&&"header-anchor"===a.getAttribute("class")&&a.remove(),"H3"!==v.tagName?n+=t[r].outerHTML:(l=t[r].textContent.trim(),n+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>")}n=n.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),n=n.replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=n+"</li>",s.$el.remove()}}},function(s,t,a){s.exports=a(627)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(628),n=a(0),e=n(null,l.a,!1,null,null,null);t.default=e.exports},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"geng-xin-ri-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 更新日志")]),a("h3",{attrs:{id:"2-0-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.11")]),a("p",[a("em",[s._v("2018-01-08")])]),a("ul",[a("li",[s._v("修复 Input 的 "),a("code",{pre:!0},[s._v("prepend")]),s._v(" 或 "),a("code",{pre:!0},[s._v("append")]),s._v(" slot 中 Select 的边框颜色错误，#9089")]),a("li",[s._v("修复 Select 的 "),a("code",{pre:!0},[s._v("remove-tag")]),s._v(" 事件参数与文档不符的问题，#9090")]),a("li",[s._v("新增 SubMenu 的 "),a("code",{pre:!0},[s._v("show-timeout")]),s._v(" 和 "),a("code",{pre:!0},[s._v("hide-timeout")]),s._v(" 属性，#8934（by @HugoLew）")]),a("li",[s._v("修复按需引入 Table 时 "),a("code",{pre:!0},[s._v("show-overflow-tooltip")]),s._v(" 的 Tooltip 样式丢失的问题，#9130")]),a("li",[s._v("修复 Table 在执行 "),a("code",{pre:!0},[s._v("clearSort")]),s._v(" 后点击对应列的排序图标无法正常排序的问题，#9100（by @zEmily）")]),a("li",[s._v("捷克语的 i18n 配置文件由 "),a("code",{pre:!0},[s._v("cz")]),s._v(" 重命名为 "),a("code",{pre:!0},[s._v("cs-CZ")]),s._v("，#9164")])]),a("h3",{attrs:{id:"2-0-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.10")]),a("p",[a("em",[s._v("2017-12-29")])]),a("ul",[a("li",[s._v("修复了 Table 在固定列和合计行并存时的高度计算错误的问题，#9026")]),a("li",[s._v("修复了 Table 样式 SCSS 文件错误编译的问题，#9028")]),a("li",[s._v("现在 DatePicker 的 "),a("code",{pre:!0},[s._v("change")]),s._v(" 事件只会在 "),a("code",{pre:!0},[s._v("value")]),s._v(" 真正改变的时候触发，#9029（by @remizovvv）")]),a("li",[s._v("新增 Input 的 "),a("code",{pre:!0},[s._v("tabindex")]),s._v(" 属性，#9041（by @dicklwm）")])]),a("h3",{attrs:{id:"2-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.9🎄")]),a("p",[a("em",[s._v("2017-12-24")])]),a("ul",[a("li",[s._v("新增 Upload 的 "),a("code",{pre:!0},[s._v("before-remove")]),s._v(" 钩子方法，#8788（by @firesh）")]),a("li",[s._v("修复 FormItem 的 "),a("code",{pre:!0},[s._v("error")]),s._v(" 属性初始值无效的问题，#8840")]),a("li",[s._v("通过指令调用的 Loading 现在支持以 "),a("code",{pre:!0},[s._v("element-loading-custom-class")]),s._v(" 属性的方式设置自定义类名，#8826（by @earlymeme）")]),a("li",[s._v("修复 CarouselItem 为异步获取时被隐藏的问题，#8921")]),a("li",[s._v("新增 Tree 的 "),a("code",{pre:!0},[s._v("renderAfterExpand")]),s._v(" 属性，#8972")])]),a("h3",{attrs:{id:"2-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.8")]),a("p",[a("em",[s._v("2017-12-12")])]),a("ul",[a("li",[s._v("新增西班牙语文档")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("show-timeout")]),s._v(" 对点击触发的 Dropdown 无效的问题，#8734（by @presidenten）")]),a("li",[s._v("修复 Form 对于 "),a("code",{pre:!0},[s._v("trigger")]),s._v(" 为 blur 的校验规则触发时机有误的问题，#8776")]),a("li",[s._v("修复 DatePicker 在范围选择时 blur 事件触发时机有误的问题，#8784")]),a("li",[s._v("TimePicker 的 "),a("code",{pre:!0},[s._v("format")]),s._v(" 新增对 AM/PM 的支持，#8620（by @firesh）")])]),a("h3",{attrs:{id:"2-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.7")]),a("p",[a("em",[s._v("2017-11-29")])]),a("ul",[a("li",[s._v("修复禁用文字按钮的样式问题，#8570")])]),a("h3",{attrs:{id:"2-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.6")]),a("p",[a("em",[s._v("2017-11-29")])]),a("ul",[a("li",[s._v("修复 Table 排序图标的样式问题，#8405")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("trigger")]),s._v(" 为 manual 的 Popover 的触发问题，#8467")]),a("li",[s._v("新增 Autocomplete 的 "),a("code",{pre:!0},[s._v("prefix-icon")]),s._v(" 和 "),a("code",{pre:!0},[s._v("suffix-icon")]),s._v(" 属性，#8446（by @liyanlong）")]),a("li",[s._v("新增 Cascader 的 "),a("code",{pre:!0},[s._v("separator")]),s._v(" 属性，#8501")]),a("li",[s._v("新增 Input 的 "),a("code",{pre:!0},[s._v("clearable")]),s._v(" 属性，#8509（by @lbogdan）")]),a("li",[s._v("新增 Pagination 的 "),a("code",{pre:!0},[s._v("background")]),s._v(" 属性，#8553")])]),a("h3",{attrs:{id:"2-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.5")]),a("p",[a("em",[s._v("2017-11-17")])]),a("ul",[a("li",[s._v("修复上个版本引入的 Popover、Tree、Breadcrumb、Cascader 的 bug，#8188 #8217 #8283")]),a("li",[s._v("修复 clickoutside 指令的内存泄露问题，#8168 #8225（by @badpunman @STLighter）")]),a("li",[s._v("修复默认尺寸的多选 Select 在清空选项后输入框高度不随之更新的问题，#8317（by @luciy）")]),a("li",[s._v("新增 Select 的 "),a("code",{pre:!0},[s._v("collapse-tags")]),s._v(" 属性，用于在多选时以文字代替 Tag，避免组件高度的增大，#8190")]),a("li",[s._v("修复被隐藏的 Table 会造成 CPU 占用持续增加的问题，#8351")]),a("li",[s._v("开放 Table 的 "),a("code",{pre:!0},[s._v("doLayout")]),s._v(" 方法，用于重新计算 Table 的布局，#8351")])]),a("h3",{attrs:{id:"2-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.4")]),a("p",[a("em",[s._v("2017-11-10")])]),a("ul",[a("li",[s._v("提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性")]),a("li",[s._v("修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042")]),a("li",[s._v("修复 Tree 的 "),a("code",{pre:!0},[s._v("updateKeyChildren")]),s._v(" 在删除子节点时的行为错误，#8100")]),a("li",[s._v("修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100")]),a("li",[s._v("修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang）")])]),a("h3",{attrs:{id:"2-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.3")]),a("p",[a("em",[s._v("2017-11-03")])]),a("ul",[a("li",[s._v("修复范围选择的 DatePicker "),a("code",{pre:!0},[s._v("editable")]),s._v(" 和 "),a("code",{pre:!0},[s._v("readonly")]),s._v(" 属性无法正常工作的问题，#7922")]),a("li",[s._v("修复嵌套的 Tabs 的样式错误，#7941")]),a("li",[s._v("修复纵向 Steps 中最后一个 Step 的样式错误，#7980")]),a("li",[s._v("修复 Pagination 的 "),a("code",{pre:!0},[s._v("current-change")]),s._v(" 事件触发时机错误的问题，#7995")]),a("li",[s._v("修复由于 Menu 使用了未注册的 Tooltip 造成其在按需引入时报错的问题，#7995")])]),a("h3",{attrs:{id:"2-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.2")]),a("p",[a("em",[s._v("2017-10-31")])]),a("ul",[a("li",[s._v("在 InputNumber 的加减按钮上单击鼠标右键不再触发值的改变，#7817")]),a("li",[s._v("Form 的 "),a("code",{pre:!0},[s._v("validate")]),s._v(" 方法现在能够正确地在异步校验完成后执行回调了，#7774（by @Allenice）")]),a("li",[s._v("修复 DatePicker 的范围选择在内核为 Chromium 53-57 的浏览器中无法使用的问题，#7838")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("list-type")]),s._v(" 为 picture-card 的 Upload 预览和删除图标丢失的问题，#7857")]),a("li",[s._v("新增 TableColumn 的 "),a("code",{pre:!0},[s._v("sort-by")]),s._v(" 属性，#7828（by @wangfengming）")]),a("li",[s._v("修复周模式下的 DatePicker 在选择某年第一周可能会显示为前一年第一周的问题，#7860（by @hh23485）")]),a("li",[s._v("修复垂直模式的 Steps 中图标宽度的样式错误，#7891")]),a("li",[s._v("增大了 Tree 中展开箭头的点击热区，#7891")])]),a("h3",{attrs:{id:"2-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.1")]),a("p",[a("em",[s._v("2017-10-28")])]),a("ul",[a("li",[s._v("修复 RadioButton 和 CheckboxButton 的样式问题，#7793")]),a("li",[s._v("修复 TimePicker 在某些情况下无法滚动的问题，#7811")]),a("li",[s._v("修复部分组件在按需引入时样式不完整的问题，#7811")])]),a("h3",{attrs:{id:"2-0-0-carbon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.0 Carbon")]),a("p",[a("em",[s._v("2017-10-27")])]),a("h4",{attrs:{id:"xin-te-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性")]),a("ul",[a("li",[s._v("综合\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("theme-chalk")]),s._v(" 主题")]),a("li",[s._v("增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload")]),a("li",[s._v("新增布局组件 Container、Header、Aside、Main 和 Footer")]),a("li",[s._v("新增 TypeScript 类型声明")]),a("li",[s._v("重绘了全部图标，并新增了部分图标")]),a("li",[s._v("新增了一系列基于断点的工具类，用于当视口尺寸满足一定条件时隐藏元素")]),a("li",[s._v("新增全局配置组件尺寸的功能。在引入 Element 时，配置 "),a("code",{pre:!0},[s._v("size")]),s._v(" 字段可以改变所有组件的默认尺寸")])])]),a("li",[s._v("Button\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("round")]),s._v(" 属性，用于圆角按钮 #6643")])])]),a("li",[s._v("TimeSelect\n"),a("ul",[a("li",[s._v("可以用 "),a("code",{pre:!0},[s._v("Up")]),s._v("、"),a("code",{pre:!0},[s._v("Down")]),s._v(" 导航，用 "),a("code",{pre:!0},[s._v("Enter")]),s._v(" 选中时间 #6023")])])]),a("li",[s._v("TimePicker\n"),a("ul",[a("li",[s._v("可以用方向键导航，用 "),a("code",{pre:!0},[s._v("Enter")]),s._v(" 选中时间 #6050")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("start-placeholder")]),s._v(" 和 "),a("code",{pre:!0},[s._v("end-placeholder")]),s._v("，用于设置范围选择时两个输入框的占位符 #7169")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("arrow-control")]),s._v(" 属性，提供另一种交互形式，#7438")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("子节点在首次被展开之前不进行渲染 #6257")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("check-descendants")]),s._v(" 属性，设置 "),a("code",{pre:!0},[s._v("lazy")]),s._v(" 模式下勾选节点时，是否完全展开整个子树 #6235")])])]),a("li",[s._v("Tag\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性 #7203")])])]),a("li",[s._v("Datepicker\n"),a("ul",[a("li",[s._v("type 为 "),a("code",{pre:!0},[s._v("datetimerange")]),s._v(" 时可以使用 "),a("code",{pre:!0},[s._v("timeFormat")]),s._v(" 格式化时间选择器 #6052")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("start-placeholder")]),s._v(" 和 "),a("code",{pre:!0},[s._v("end-placeholder")]),s._v("，用于设置范围选择时两个输入框的占位符 #7169")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("value-format")]),s._v(" 属性，支持对绑定值的格式进行自定义，#7367")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("unlink-panels")]),s._v(" 属性，用于在选择日期范围时取消两个日期面板之间的联动")])])]),a("li",[s._v("MessageBox\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("closeOnHashChange")]),s._v(" 属性 #6043")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性，提供居中布局 #7029")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("roundButton")]),s._v(" 属性，使得内部按钮为圆角按钮 #7029")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 属性，使得 "),a("code",{pre:!0},[s._v("message")]),s._v(" 支持传入 HTML 字符串"),a("sup",[s._v("*")]),s._v(" #6043")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("inputType")]),s._v(" 属性，用户指定内部输入框的类型，#7651")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("width")]),s._v("、"),a("code",{pre:!0},[s._v("fullscreen")]),s._v("、"),a("code",{pre:!0},[s._v("append-to-body")]),s._v(" 属性，支持嵌套使用")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性，提供居中布局 #7042")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("focus-after-closed")]),s._v("、"),a("code",{pre:!0},[s._v("focus-after-open")]),s._v("属性，支持无障碍访问 #6511")])])]),a("li",[s._v("ColorPicker\n"),a("ul",[a("li",[s._v("增加手动输入色值的支持 #6167")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性，用于控制组件的大小 #7026")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("disabled")]),s._v(" 属性，用于禁用组件 #7026")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("popper-class")]),s._v(" 属性，#7351")])])]),a("li",[s._v("Message\n"),a("ul",[a("li",[s._v("图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 属性，使得 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性支持传入 HTML 字符串"),a("sup",[s._v("*")]),s._v(" #6207")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性，提供居中布局 #6875")])])]),a("li",[s._v("Notification\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("position")]),s._v(" 属性，用于配置 Notification 出现的位置 #6231")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 属性，使得 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性支持传入 HTML 字符串"),a("sup",[s._v("*")]),s._v(" #6231")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("showClose")]),s._v(" 属性，用于隐藏关闭按钮 #6402")])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("show-score")]),s._v(" 属性，控制是否在右侧显示当前分数 #6295")])])]),a("li",[s._v("Tabs\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("tab-position")]),s._v(" 属性，控制选项面板内容显示的上、下、左、右四个方向 #6096")])])]),a("li",[s._v("Radio\n"),a("ul",[a("li",[s._v("增加 "),a("code",{pre:!0},[s._v("border")]),s._v(" 属性和 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性 #6690")])])]),a("li",[s._v("Checkbox\n"),a("ul",[a("li",[s._v("增加 "),a("code",{pre:!0},[s._v("border")]),s._v(" 属性和 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性 #6690")])])]),a("li",[s._v("Alert\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性，提供居中布局 #6876")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("background-color")]),s._v("、"),a("code",{pre:!0},[s._v("text-color")]),s._v(" 和 "),a("code",{pre:!0},[s._v("active-text-color")]),s._v(" 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("open")]),s._v(" 和 "),a("code",{pre:!0},[s._v("close")]),s._v(" 方法，支持手动打开和关闭 SubMenu，#7412")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("inline-message")]),s._v(" 属性，设置后校验信息会以行内样式显示 #7032")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("status-icon")]),s._v(" 属性，用于在输入框中显示校验结果反馈图标 #7032")]),a("li",[s._v("Form 和 FormItem 新增 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性，用于控制表单内组件的尺寸，#7428")]),a("li",[a("code",{pre:!0},[s._v("validate")]),s._v(" 方法在不传入 callback 的情况下返回 promise，#7405")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("clearValidate")]),s._v(" 方法，用于清空所有表单项的验证信息，#7623")])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("suffix")]),s._v("、"),a("code",{pre:!0},[s._v("prefix")]),s._v(" 的 slot，以及 "),a("code",{pre:!0},[s._v("suffixIcon")]),s._v("、"),a("code",{pre:!0},[s._v("prefixIcon")]),s._v(" 属性，用于给输入框内部增加前置和后置内容 #7032")])])]),a("li",[s._v("Breadcrumb\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("separator-class")]),s._v(" 属性，可使用图标作为分隔符 #7203")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("simple")]),s._v(" 属性，用于开启简洁风格的步骤条 #7274")])])]),a("li",[s._v("Pagination\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("prev-text")]),s._v(" 和 "),a("code",{pre:!0},[s._v("next-text")]),s._v(" 属性，用于自定义上一页和下一页的文本 #7005")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("配置对象新增 "),a("code",{pre:!0},[s._v("spinner")]),s._v(" 和 "),a("code",{pre:!0},[s._v("background")]),s._v(" 字段，支持自定义加载图标和背景色，#7390")])])]),a("li",[s._v("Autocomplete\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("debounce")]),s._v(" 属性，#7413")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("limit")]),s._v(" 和 "),a("code",{pre:!0},[s._v("on-exceed")]),s._v(" 属性，支持对上传文件的个数进行限制，#7405")])])]),a("li",[s._v("DateTimePicker\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("time-arrow-control")]),s._v(" 属性，用于开启时间选择器的 "),a("code",{pre:!0},[s._v("arrow-control")]),s._v("，#7438")])])]),a("li",[s._v("Layout\n"),a("ul",[a("li",[s._v("新增断点 "),a("code",{pre:!0},[s._v("xl")]),s._v("，适用于宽度大于 1920px 的视口")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("span-method")]),s._v(" 属性，用于合并行或列")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("clearSort")]),s._v(" 方法，用于清空排序状态")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("clearFilter")]),s._v(" 方法，用于清空过滤状态")]),a("li",[s._v("对于可展开行，当该行展开时会获得一个 "),a("code",{pre:!0},[s._v(".expanded")]),s._v(" 类名，方便自定义样式")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性，用于控制表格尺寸")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("toggleRowExpansion")]),s._v(" 方法，用于手动展开或关闭行")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("cell-class-name")]),s._v(" 属性，用于指定单元格的类名")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("cell-style")]),s._v(" 属性，用于指定单元格的样式")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("header-row-class-name")]),s._v(" 属性，用于指定表头行的类名")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("header-row-style")]),s._v(" 属性，用于指定表头行的样式")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("header-cell-class-name")]),s._v(" 属性，用于指定表头单元格的类名")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("header-cell-style")]),s._v(" 属性，用于指定表头单元格的样式")]),a("li",[s._v("TableColumn 的 "),a("code",{pre:!0},[s._v("prop")]),s._v(" 属性支持 "),a("code",{pre:!0},[s._v("object[key]")]),s._v(" 格式")]),a("li",[s._v("TableColumn 新增 "),a("code",{pre:!0},[s._v("index")]),s._v(" 属性，用于自定义索引值")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("reserve-keyword")]),s._v(" 属性，用于在选择某个选项后保留当前的搜索关键词")])])])]),a("h4",{attrs:{id:"xiu-fu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复")]),a("ul",[a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("选择周数时，"),a("code",{pre:!0},[s._v("v-model")]),s._v(" 结果返回该周第二天的问题 #6038")]),a("li",[s._v("在 "),a("code",{pre:!0},[s._v("daterange")]),s._v(" 类型中，第一次的输入会被清空的问题 #6021")])])]),a("li",[s._v("DateTimePicker\n"),a("ul",[a("li",[s._v("和 TimePicker 相互影响的问题 #6090")]),a("li",[s._v("选择时间小时和秒可超出限制的问题 #6076")])])]),a("li",[s._v("TimePicker\n"),a("ul",[a("li",[s._v("失去焦点时无法正确改变 "),a("code",{pre:!0},[s._v("v-model")]),s._v(" 值的问题 #6023")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("修复 Table 在父元素从 "),a("code",{pre:!0},[s._v("display: none")]),s._v(" 变成其他状态时会隐藏的问题")]),a("li",[s._v("修复 Table 在父元素为 "),a("code",{pre:!0},[s._v("display: flex")]),s._v(" 时可能出现的宽度逐渐变大的问题")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("append")]),s._v(" 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("expand-row-keys")]),s._v(" 属性初始化无效的问题")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("data")]),s._v(" 改变时过滤条件失效的问题")]),a("li",[s._v("修复多级表头时固定列隐藏情况计算错误的问题")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("max-height")]),s._v(" 变更后无法恢复的问题")]),a("li",[s._v("修复一些样式上的计算错误")])])])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("综合\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("theme-default")])]),a("li",[s._v("最低兼容 Vue 2.5.2 和 IE 10")]),a("li",[s._v("表单组件的 "),a("code",{pre:!0},[s._v("change")]),s._v(" 事件和 Pagination 的 "),a("code",{pre:!0},[s._v("current-change")]),s._v(" 事件现在仅响应用户交互")]),a("li",[s._v("Button 和表单组件的 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性现在可接受 "),a("code",{pre:!0},[s._v("medium")]),s._v("、"),a("code",{pre:!0},[s._v("small")]),s._v(" 和 "),a("code",{pre:!0},[s._v("mini")])]),a("li",[s._v("为了方便使用第三方图标，Button 的 "),a("code",{pre:!0},[s._v("icon")]),s._v(" 属性、Input 的 "),a("code",{pre:!0},[s._v("prefix-icon")]),s._v(" 和 "),a("code",{pre:!0},[s._v("suffix-icon")]),s._v(" 属性、Steps 的 "),a("code",{pre:!0},[s._v("icon")]),s._v(" 属性现在需要传入完整的图标类名")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性。现在 Dialog 的尺寸由 "),a("code",{pre:!0},[s._v("width")]),s._v(" 和 "),a("code",{pre:!0},[s._v("fullscreen")]),s._v(" 控制")]),a("li",[s._v("移除通过 "),a("code",{pre:!0},[s._v("v-model")]),s._v(" 控制 Dialog 显示和隐藏的功能")])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("text-template")]),s._v(" 属性更名为 "),a("code",{pre:!0},[s._v("score-template")])])])]),a("li",[s._v("Dropdown\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("menu-align")]),s._v(" 属性变更为 "),a("code",{pre:!0},[s._v("placement")]),s._v("，增加更多方位属性")])])]),a("li",[s._v("Transfer\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("footer-format")]),s._v(" 属性更名为 "),a("code",{pre:!0},[s._v("format")])])])]),a("li",[s._v("Switch\n"),a("ul",[a("li",[s._v("由于 "),a("code",{pre:!0},[s._v("on-*")]),s._v(" 属性在 JSX 中会被识别为事件，导致 Switch 所有 "),a("code",{pre:!0},[s._v("on-*")]),s._v(" 属性在 JSX 中无法正常工作，所以 "),a("code",{pre:!0},[s._v("on-*")]),s._v(" 属性更名为 "),a("code",{pre:!0},[s._v("active-*")]),s._v("，对应地，"),a("code",{pre:!0},[s._v("off-*")]),s._v(" 属性更名为 "),a("code",{pre:!0},[s._v("inactive-*")]),s._v("。受到影响的属性有："),a("code",{pre:!0},[s._v("on-icon-class")]),s._v("、"),a("code",{pre:!0},[s._v("off-icon-class")]),s._v("、"),a("code",{pre:!0},[s._v("on-text")]),s._v("、"),a("code",{pre:!0},[s._v("off-text")]),s._v("、"),a("code",{pre:!0},[s._v("on-color")]),s._v("、"),a("code",{pre:!0},[s._v("off-color")]),s._v("、"),a("code",{pre:!0},[s._v("on-value")]),s._v("、"),a("code",{pre:!0},[s._v("off-value")])]),a("li",[a("code",{pre:!0},[s._v("active-text")]),s._v(" 和 "),a("code",{pre:!0},[s._v("inactive-text")]),s._v(" 属性不再有默认值")])])]),a("li",[s._v("Tag\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("type")]),s._v(" 属性现在支持 "),a("code",{pre:!0},[s._v("success")]),s._v("、"),a("code",{pre:!0},[s._v("info")]),s._v("、"),a("code",{pre:!0},[s._v("warning")]),s._v(" 和 "),a("code",{pre:!0},[s._v("danger")]),s._v(" 四个值")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("theme")]),s._v(" 属性。现在通过 "),a("code",{pre:!0},[s._v("background-color")]),s._v("、"),a("code",{pre:!0},[s._v("text-color")]),s._v(" 和 "),a("code",{pre:!0},[s._v("active-text-color")]),s._v(" 属性进行颜色的自定义")])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("icon")]),s._v(" 属性。现在通过 "),a("code",{pre:!0},[s._v("suffix-icon")]),s._v(" 属性或者 "),a("code",{pre:!0},[s._v("suffix")]),s._v(" 具名 slot 来加入尾部图标")]),a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("on-icon-click")]),s._v(" 属性和 "),a("code",{pre:!0},[s._v("click")]),s._v(" 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标")]),a("li",[a("code",{pre:!0},[s._v("change")]),s._v(" 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 "),a("code",{pre:!0},[s._v("input")]),s._v(" 事件")])])]),a("li",[s._v("Autocomplete\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("custom-item")]),s._v(" 属性。现在通过 "),a("code",{pre:!0},[s._v("scoped slot")]),s._v(" 自定义输入建议列表项的内容")]),a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("props")]),s._v(" 属性，现在使用 "),a("code",{pre:!0},[s._v("value-key")]),s._v(" 属性指定输入建议对象中用于显示的键名")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性")]),a("li",[s._v("现在步骤条将默认充满父容器")]),a("li",[s._v("DatePicker")]),a("li",[a("code",{pre:!0},[s._v("change")]),s._v(" 事件参数现在为组件的绑定值，格式由 "),a("code",{pre:!0},[s._v("value-format")]),s._v(" 控制")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("移除通过 "),a("code",{pre:!0},[s._v("inline-template")]),s._v(" 自定义列模板的功能")]),a("li",[a("code",{pre:!0},[s._v("sort-method")]),s._v(" 现在和 "),a("code",{pre:!0},[s._v("Array.sort")]),s._v(" 保持一致的逻辑，要求返回一个数字")]),a("li",[s._v("将 "),a("code",{pre:!0},[s._v("append")]),s._v(" slot 移至 "),a("code",{pre:!0},[s._v("tbody")]),s._v(" 元素以外，以保证其只被渲染一次")]),a("li",[a("code",{pre:!0},[s._v("expand")]),s._v(" 事件更名为 "),a("code",{pre:!0},[s._v("expand-change")]),s._v("，以保证 API 的命名一致性")]),a("li",[a("code",{pre:!0},[s._v("row-class-name")]),s._v(" 和 "),a("code",{pre:!0},[s._v("row-style")]),s._v(" 的函数参数改为对象，以保证 API 的一致性")])])])]),a("h2",{attrs:{id:""}},[a("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[s._v("¶")])]),a("p",[a("i",[a("sup",[s._v("*")]),s._v(" 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS 攻击")]),s._v("。因此请在 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 打开的情况下，确保 "),a("code",{pre:!0},[s._v("message")]),s._v(" 的内容是可信的，"),a("strong",[s._v("永远不要")]),s._v("将用户提交的内容赋值给 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性。")])])])}],e={render:l,staticRenderFns:n};t.a=e},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 更新日志\n ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},n=[],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){"use strict";function l(s){a(631)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(633),e=a.n(n),r=a(634),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(632);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("d3613554",l,!0)},function(s,t,a){t=s.exports=a(109)(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 n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s},e=a(111),r=l(e),v=a(78),_=l(v),c=a(51),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":n(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)])},n=[],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){"use strict";function l(s){a(636)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(638),e=a(0),r=l,v=e(null,n.a,!1,r,"data-v-8895a632",null);t.default=v.exports},function(s,t,a){var l=a(637);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("21bc275d",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,".cards[data-v-8895a632]{margin:30px 0 70px}.card[data-v-8895a632]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-8895a632]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-8895a632]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-8895a632]{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("设计原则")]),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(596),alt:"Consistency"}}),l("h4",[s._v("一致")]),l("span",[s._v("Consistency")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(597),alt:"Feedback"}}),l("h4",[s._v("反馈")]),l("span",[s._v("Feedback")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(598),alt:"Efficiency"}}),l("h4",[s._v("效率")]),l("span",[s._v("Efficiency")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(599),alt:"Controllability"}}),l("h4",[s._v("可控")]),l("span",[s._v("Controllability")])])])],1),l("h3",[s._v("一致性 Consistency")]),s._m(0),l("h3",[s._v("反馈 Feedback")]),s._m(1),l("h3",[s._v("效率 Efficiency")]),s._m(2),l("h3",[s._v("可控 Controllability")]),s._m(3)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("与现实生活一致：")]),s._v("与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("li",[a("strong",[s._v("在界面中一致：")]),s._v("所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("控制反馈：")]),s._v("通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("li",[a("strong",[s._v("页面反馈：")]),s._v("操作后，通过页面元素的变化清晰地展现当前状态。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("简化流程：")]),s._v("设计简洁直观的操作流程；")]),a("li",[a("strong",[s._v("清晰明确：")]),s._v("语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("li",[a("strong",[s._v("帮助用户识别：")]),s._v("界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("用户决策：")]),s._v("根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("li",[a("strong",[s._v("结果可控：")]),s._v("用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){"use strict";function l(s){a(640)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(642),e=a.n(n),r=a(643),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(641);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("2bfc33ee",l,!0)},function(s,t,a){t=s.exports=a(109)(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:"设计原则"},{path:"/nav",name:"导航"}]}}}},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)},n=[],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){"use strict";function l(s){a(645)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(647),e=a.n(n),r=a(648),v=a(0),_=l,c=v(e.a,r.a,!1,_,"data-v-f954b68e",null);t.default=c.exports},function(s,t,a){var l=a(646);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("b0404fb8",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,'.cards .container[data-v-f954b68e]:after{clear:both}.cards .container[data-v-f954b68e]:after,.cards .container[data-v-f954b68e]:before{display:table;content:""}.banner[data-v-f954b68e]{text-align:center}.banner-desc[data-v-f954b68e]{padding-top:20px}.banner-desc h1[data-v-f954b68e]{font-size:34px;margin:0;line-height:48px;color:#555}.banner-desc p[data-v-f954b68e]{font-size:18px;line-height:28px;color:#888;margin:10px 0 5px}.sponsor[data-v-f954b68e]{margin:0 auto 50px;display:-ms-flexbox;display:flex;width:400px;height:100px;-ms-flex-pack:center;justify-content:center}.sponsor img[data-v-f954b68e]{margin-right:20px}.sponsor div[data-v-f954b68e]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.sponsor p[data-v-f954b68e]{margin:0;line-height:1.8;color:#999;font-size:14px}.jumbotron[data-v-f954b68e]{width:890px;height:465px;margin:30px auto;position:relative}.jumbotron div[data-v-f954b68e]{width:100%;height:100%;background-color:transparent;position:absolute;top:0;left:0}.jumbotron img[data-v-f954b68e]{position:absolute}.jumbotron .jumbotron-cloud-1[data-v-f954b68e]{right:0;top:0;height:55px}.jumbotron .jumbotron-plant-2[data-v-f954b68e]{left:60px;top:200px}.jumbotron .jumbotron-web[data-v-f954b68e]{height:385px;top:35px;left:110px}.jumbotron .jumbotron-cloud-2[data-v-f954b68e]{left:0;top:50px;height:55px}.jumbotron .jumbotron-compo-1[data-v-f954b68e]{left:94px;height:90px;top:220px}.jumbotron .jumbotron-compo-2[data-v-f954b68e]{right:73px;top:60px;height:124px}.jumbotron .jumbotron-compo-3[data-v-f954b68e]{right:42px;top:200px;height:120px}.jumbotron .jumbotron-plant-1[data-v-f954b68e]{bottom:0;left:30px;height:185px}.jumbotron .jumbotron-figure-1[data-v-f954b68e]{bottom:0;right:180px;height:140px}.jumbotron .jumbotron-figure-2[data-v-f954b68e]{bottom:0;right:10px;height:68px}.cards[data-v-f954b68e]{margin:0 auto 110px;width:1140px}.cards .container[data-v-f954b68e]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-f954b68e]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-f954b68e]{width:160px;height:120px}.card[data-v-f954b68e]{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-f954b68e]{margin:66px auto 60px}.card h3[data-v-f954b68e]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-f954b68e]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:20px}.card a[data-v-f954b68e]{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-f954b68e]:hover{color:#fff;background:#409eff}.card[data-v-f954b68e]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@media (max-width:1140px){.cards[data-v-f954b68e]{width:100%}.cards .container[data-v-f954b68e]{width:100%;margin:0}.banner .container[data-v-f954b68e]{width:100%;box-sizing:border-box}.banner img[data-v-f954b68e]{right:0}}@media (max-width:1000px){.banner .container img[data-v-f954b68e],.jumbotron[data-v-f954b68e]{display:none}}@media (max-width:768px){.cards li[data-v-f954b68e]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-f954b68e]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-f954b68e],.banner-stars[data-v-f954b68e]{display:none}.banner-desc h2[data-v-f954b68e]{font-size:32px}.banner-desc p[data-v-f954b68e]{width:auto}}',""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(600);t.default={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),s._m(2),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(601),alt:""}}),l("h3",[s._v("指南")]),l("p",[s._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[s._v("查看详情\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(602),alt:""}}),l("h3",[s._v("组件")]),l("p",[s._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[s._v("查看详情\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(603),alt:""}}),l("h3",[s._v("资源")]),l("p",[s._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[s._v("查看详情\n ")])],1)])])])])},n=[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("p",[s._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库")])])])},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(604),alt:""}}),l("img",{staticClass:"jumbotron-web",attrs:{src:a(605),alt:""}}),l("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(606),alt:""}}),l("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(607),alt:""}}),l("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(608),alt:""}})]),l("div",{attrs:{"data-hover-layer":"0"}},[l("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(609),alt:""}}),l("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(610),alt:""}})]),l("div",{attrs:{"data-hover-layer":"1"}},[l("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(611),alt:""}}),l("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(612),alt:""}}),l("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(613),alt:""}})])])},function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("a",{staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[l("img",{attrs:{width:"35px",src:a(614),alt:"tipe.io"}}),l("div",[l("p",[s._v("Sponsored by Tipe.io")]),l("p",[s._v("Next Generation API-first CMS")])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){"use strict";function l(s){a(650)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(652),e=a.n(n),r=a(653),v=a(0),_=l,c=v(e.a,r.a,!1,_,"data-v-141bdc4a",null);t.default=c.exports},function(s,t,a){var l=a(651);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("03a651b4",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,"h3[data-v-141bdc4a]{margin-bottom:15px}.block[data-v-141bdc4a]{margin-bottom:55px}p[data-v-141bdc4a]{margin:0 0 15px}.nav-demos p[data-v-141bdc4a]{margin-bottom:50px}.nav-demos h5[data-v-141bdc4a]{margin:0}.nav-demos img[data-v-141bdc4a]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-141bdc4a]{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-141bdc4a]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-141bdc4a]{display:block;width:100%}.mask[data-v-141bdc4a]{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-141bdc4a],.zoom-leave-active[data-v-141bdc4a]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-141bdc4a],.zoom-leave-active[data-v-141bdc4a]{-ms-transform:scale(.3);transform:scale(.3);opacity:0}.fade-enter-active[data-v-141bdc4a],.fade-leave-active[data-v-141bdc4a]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-141bdc4a],.fade-leave-active[data-v-141bdc4a]{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={},n=document;l.left=(n.body.scrollWidth-s)/2,l.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=s+"px",this.showDialog=!0}}}},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("导航")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("侧栏导航")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._v("可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:a(615),alt:"一级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("一级类目")]),l("p",[s._v("适用于结构简单的网站：只有一级页面时，不需要使用面包屑。")]),l("img",{attrs:{src:a(616),alt:"二级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("二级类目")]),l("p",[s._v("侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。")]),l("img",{attrs:{src:a(617),alt:"三级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("三级类目")]),l("p",[s._v("适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。")])])],1)],1),l("div",{staticClass:"block"},[l("h3",[s._v("顶部导航")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._v("顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:a(618),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),l("p",[s._v("适用于导航较少，页面篇幅较长的网站。")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._v("导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("选择合适的导航")]),a("p",[s._v("选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。")])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){"use strict";function l(s){a(655)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(657),e=a(0),r=l,v=e(null,n.a,!1,r,"data-v-63b9e6f7",null);t.default=v.exports},function(s,t,a){var l=a(656);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("35883a73",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,'.cards .container[data-v-63b9e6f7]:after{clear:both}.cards .container[data-v-63b9e6f7]:after,.cards .container[data-v-63b9e6f7]:before{display:table;content:""}.page-resource[data-v-63b9e6f7]{padding-top:55px;box-sizing:border-box}.page-resource .resource-placeholder[data-v-63b9e6f7]{margin:50px auto 100px;text-align:center}.page-resource .resource-placeholder img[data-v-63b9e6f7]{width:150px}.page-resource .resource-placeholder h4[data-v-63b9e6f7]{margin:20px 0 16px;font-size:16px;color:#1f2f3d;line-height:1}.page-resource .resource-placeholder p[data-v-63b9e6f7]{margin:0;font-size:14px;color:#99a9bf;line-height:1}.cards[data-v-63b9e6f7]{margin:35px auto 110px}.cards .container[data-v-63b9e6f7]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-63b9e6f7]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-63b9e6f7]{font-size:28px;margin:0}p[data-v-63b9e6f7]{font-size:14px;color:#5e6d82}.card[data-v-63b9e6f7]{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-63b9e6f7]{margin:75px auto 35px;height:87px}.card h3[data-v-63b9e6f7]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-63b9e6f7]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.8}.card a[data-v-63b9e6f7]{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-63b9e6f7]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-63b9e6f7]{height:auto;padding-bottom:20px}.cards h3[data-v-63b9e6f7]{height:auto}}',""])},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},n=[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"page-container page-resource"},[l("h2",[s._v("资源")]),l("p",[s._v("设计资源正在整理和完善中")]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(619),alt:""}}),l("h3",[s._v("Sketch Template")]),l("p",[s._v("从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[s._v("下载")])])])])])])}],e={render:l,staticRenderFns:n};t.a=e},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){s.exports=a(731)},function(s,t,a){"use strict";function l(s){a(732)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(734),e=a.n(n),r=a(735),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(733);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("677e2dae",l,!0)},function(s,t,a){t=s.exports=a(109)(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("用于页面中展示重要的提示信息。")]),s._m(1),a("p",[s._v("页面中的非浮层元素，不会自动消失。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="成功提示的文案" type="success">\n </el-alert>\n <el-alert title="消息提示的文案" type="info">\n </el-alert>\n <el-alert title="警告提示的文案" type="warning">\n </el-alert>\n <el-alert title="错误提示的文案" type="error">\n </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success"}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info"}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning"}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error"}})]],2),a("p",[s._v("Alert 组件提供四种主题，由"),a("code",[s._v("type")]),s._v("属性指定，默认值为"),a("code",[s._v("info")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"成功提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"消息提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"警告提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"错误提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("自定义关闭按钮为文字或其他符号。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="不可关闭的 alert" type="success" :closable="false">\n </el-alert>\n <el-alert title="自定义 close-text" type="info" close-text="知道了">\n </el-alert>\n <el-alert title="设置了回调的 alert" type="warning" @close="hello">\n </el-alert>\n</template>\n\n\n',script:"\n export default {\n methods: {\n hello() {\n alert('Hello World!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"不可关闭的 alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"自定义 close-text",type:"info","close-text":"知道了"}}),a("el-alert",{attrs:{title:"设置了回调的 alert",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。"),a("code",[s._v("closable")]),s._v("属性决定是否可关闭，接受"),a("code",[s._v("boolean")]),s._v("，默认为"),a("code",[s._v("true")]),s._v("。你可以设置"),a("code",[s._v("close-text")]),s._v("属性来代替右侧的关闭图标，注意："),a("code",[s._v("close-text")]),s._v("必须为文本。设置"),a("code",[s._v("close")]),s._v("事件来设置关闭时的回调。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"不可关闭的 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"自定义 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('"知道了"')]),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(">")]),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"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("表示某种状态时提升可读性。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="成功提示的文案" type="success" show-icon>\n </el-alert>\n <el-alert title="消息提示的文案" type="info" show-icon>\n </el-alert>\n <el-alert title="警告提示的文案" type="warning" show-icon>\n </el-alert>\n <el-alert title="错误提示的文案" type="error" show-icon>\n </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error","show-icon":""}})]],2),a("p",[s._v("通过设置"),a("code",[s._v("show-icon")]),s._v("属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"成功提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"消息提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"警告提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"错误提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="成功提示的文案" type="success" center="" show-icon>\n </el-alert>\n <el-alert title="消息提示的文案" type="info" center="" show-icon>\n </el-alert>\n <el-alert title="警告提示的文案" type="warning" center="" show-icon>\n </el-alert>\n <el-alert title="错误提示的文案" type="error" center="" show-icon>\n </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error",center:"","show-icon":""}})]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"成功提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"消息提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"警告提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"错误提示的文案"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("包含标题和内容，解释更详细的警告。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">\n </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"带辅助性文字介绍",type:"success",description:"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"}})]],2),a("p",[s._v("除了必填的"),a("code",[s._v("title")]),s._v("属性外，你可以设置"),a("code",[s._v("description")]),s._v("属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"带辅助性文字介绍"')]),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('"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"')]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n </el-alert>\n <el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n </el-alert>\n <el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n </el-alert>\n <el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}})]],2),a("p",[s._v("最后，这是一个同时具有 icon 和辅助性文字的样例。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"成功提示的文案"')]),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('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"消息提示的文案"')]),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('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"警告提示的文案"')]),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('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),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('"错误提示的文案"')]),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('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert-jing-gao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert 警告")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义关闭按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"wen-zi-ju-zhong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 文字居中")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性让文字水平居中。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有辅助性文字介绍")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon 和辅助性文字介绍")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("标题，"),a("strong",[s._v("必选参数")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("辅助性文字。也可通过默认 slot 传入")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("文字是否居中")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("关闭按钮自定义文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("是否显示图标")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭alert时触发的事件")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(737)},function(s,t,a){"use strict";function l(s){a(738),a(740)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(742),e=a(0),r=l,v=e(null,n.a,!1,r,"data-v-630a65da",null);t.default=v.exports},function(s,t,a){var l=a(739);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("5658de62",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,".demo-badge.demo-box .el-dropdown{vertical-align:middle}",""])},function(s,t,a){var l=a(741);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("4af24bce",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,'.clearfix[data-v-630a65da]:after{clear:both}.clearfix[data-v-630a65da]:after,.clearfix[data-v-630a65da]:before{display:table;content:""}.share-button[data-v-630a65da]{width:36px;padding:10px}.mark[data-v-630a65da]{margin-top:8px;line-height:1;float:right}.item[data-v-630a65da]{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("出现在按钮、图标旁的数字或状态标记。")]),s._m(1),a("p",[s._v("展示新消息数量。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="12" class="item">\n <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n <el-button size="small">回复</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n <span class="el-dropdown-link">\n 点我查看<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item class="clearfix">\n 评论\n <el-badge class="mark" :value="12">\n </el-badge></el-dropdown-item>\n <el-dropdown-item class="clearfix">\n 回复\n <el-badge class="mark" :value="3">\n </el-badge></el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n 点我查看"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n 评论\n "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n 回复\n "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("定义"),a("code",[s._v("value")]),s._v("属性，它接受"),a("code",[s._v("Number")]),s._v("或者"),a("code",[s._v("String")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("评论"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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("回复"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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 点我查看"),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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-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 评论\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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 回复\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可自定义最大值。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="200" :max="99" class="item">\n <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n <el-button size="small">回复</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1)],1),a("p",[s._v("由"),a("code",[s._v("max")]),s._v("属性定义，它接受一个"),a("code",[s._v("Number")]),s._v("，需要注意的是，只有当"),a("code",[s._v("value")]),s._v("为"),a("code",[s._v("Number")]),s._v("时，它才会生效。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("评论"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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("回复"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以显示数字以外的文本内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge value="new" class="item">\n <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n <el-button size="small">回复</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1)],1),a("p",[s._v("定义"),a("code",[s._v("value")]),s._v("为"),a("code",[s._v("String")]),s._v("类型是时可以用于显示自定义文本。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("评论"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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("回复"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("以红点的形式标注需要关注的内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge is-dot class="item">数据查询</el-badge>\n<el-badge is-dot class="item">\n <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("数据查询")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1),a("p",[s._v("除了数字外，设置"),a("code",[s._v("is-dot")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("数据查询"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge-biao-ji"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge-biao-ji","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge 标记")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zui-da-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zui-da-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 最大值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-hong-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-hong-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 小红点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("显示值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("小圆点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("隐藏 badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(744)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(745),n=a(0),e=n(null,l.a,!1,null,null,null);t.default=e.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("显示当前页面的路径，快速返回之前的任意页面。")]),s._m(1),a("p",[s._v("适用广泛的基础用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-breadcrumb separator="/">\n <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("首页")]),a("el-breadcrumb-item",[s._v("活动管理")]),a("el-breadcrumb-item",[s._v("活动列表")]),a("el-breadcrumb-item",[s._v("活动详情")])],1)],1),a("p",[s._v("在"),a("code",[s._v("el-breadcrumb")]),s._v("中使用"),a("code",[s._v("el-breadcrumb-item")]),s._v("标签表示从首页开始的每一级。Element 提供了一个"),a("code",[s._v("separator")]),s._v("属性，在"),a("code",[s._v("el-breadcrumb")]),s._v("标签中设置它来决定分隔符，它只能是字符串，默认为斜杠"),a("code",[s._v("/")]),s._v("。")]),a("div",{staticClass:"highlight",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("首页"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),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("活动管理"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),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("活动列表"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),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("活动详情"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-breadcrumb separator-class="el-icon-arrow-right">\n <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("首页")]),a("el-breadcrumb-item",[s._v("活动管理")]),a("el-breadcrumb-item",[s._v("活动列表")]),a("el-breadcrumb-item",[s._v("活动详情")])],1)],1),a("p",[s._v("通过设置 "),a("code",[s._v("separator-class")]),s._v(" 可使用相应的 "),a("code",[s._v("iconfont")]),s._v(" 作为分隔符，注意这将使 "),a("code",[s._v("separator")]),s._v(" 设置失效")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("首页"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),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("活动管理"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),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("活动列表"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),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("活动详情"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb-mian-bao-xie"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-mian-bao-xie","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb 面包屑")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-biao-fen-ge-fu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-fen-ge-fu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图标分隔符")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("分隔符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("斜杠'/'")])]),a("tr",[a("td",[s._v("separator-class")]),a("td",[s._v("图标分隔符 class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("路由跳转对象，同 "),a("code",{pre:!0},[s._v("vue-router")]),s._v(" 的 "),a("code",{pre:!0},[s._v("to")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(747)},function(s,t,a){"use strict";function l(s){a(748)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(750),e=a(0),r=l,v=e(null,n.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var l=a(749);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("7631dcd4",l,!0)},function(s,t,a){t=s.exports=a(109)(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("常用的操作按钮。")]),s._m(1),a("p",[s._v("基础的按钮用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n <el-button>默认按钮</el-button>\n <el-button type="primary">主要按钮</el-button>\n <el-button type="success">成功按钮</el-button>\n <el-button type="info">信息按钮</el-button>\n <el-button type="warning">警告按钮</el-button>\n <el-button type="danger">危险按钮</el-button>\n</div>\n\n<div style="margin: 20px 0">\n <el-button plain>朴素按钮</el-button>\n <el-button type="primary" plain>主要按钮</el-button>\n <el-button type="success" plain>成功按钮</el-button>\n <el-button type="info" plain>信息按钮</el-button>\n <el-button type="warning" plain>警告按钮</el-button>\n <el-button type="danger" plain>危险按钮</el-button>\n</div>\n\n<div>\n <el-button round>圆形按钮</el-button>\n <el-button type="primary" round>主要按钮</el-button>\n <el-button type="success" round>成功按钮</el-button>\n <el-button type="info" round>信息按钮</el-button>\n <el-button type="warning" round>警告按钮</el-button>\n <el-button type="danger" round>危险按钮</el-button>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-button",[s._v("默认按钮")]),a("el-button",{attrs:{type:"primary"}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"success"}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"info"}},[s._v("信息按钮")]),a("el-button",{attrs:{type:"warning"}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger"}},[s._v("危险按钮")])],1),a("div",{staticStyle:{margin:"20px 0"}},[a("el-button",{attrs:{plain:""}},[s._v("朴素按钮")]),a("el-button",{attrs:{type:"primary",plain:""}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"success",plain:""}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"info",plain:""}},[s._v("信息按钮")]),a("el-button",{attrs:{type:"warning",plain:""}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger",plain:""}},[s._v("危险按钮")])],1),a("div",[a("el-button",{attrs:{round:""}},[s._v("圆形按钮")]),a("el-button",{attrs:{type:"primary",round:""}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"success",round:""}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"info",round:""}},[s._v("信息按钮")]),a("el-button",{attrs:{type:"warning",round:""}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger",round:""}},[s._v("危险按钮")])],1)]),a("p",[s._v("使用"),a("code",[s._v("type")]),s._v("、"),a("code",[s._v("plain")]),s._v("和"),a("code",[s._v("round")]),s._v("属性来定义 Button 的样式。")]),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("默认按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("主要按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("成功按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("信息按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("警告按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("危险按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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\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("朴素按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("主要按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("成功按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("信息按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("警告按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("危险按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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\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("圆形按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("主要按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("成功按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("信息按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("警告按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("危险按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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")])])])]),s._m(2),a("p",[s._v("按钮不可用状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n <el-button disabled>默认按钮</el-button>\n <el-button type="primary" disabled>主要按钮</el-button>\n <el-button type="success" disabled>成功按钮</el-button>\n <el-button type="info" disabled>信息按钮</el-button>\n <el-button type="warning" disabled>警告按钮</el-button>\n <el-button type="danger" disabled>危险按钮</el-button>\n</div>\n\n<div style="margin-top: 20px">\n <el-button plain disabled>朴素按钮</el-button>\n <el-button type="primary" plain disabled>主要按钮</el-button>\n <el-button type="success" plain disabled>成功按钮</el-button>\n <el-button type="info" plain disabled>信息按钮</el-button>\n <el-button type="warning" plain disabled>警告按钮</el-button>\n <el-button type="danger" plain disabled>危险按钮</el-button>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-button",{attrs:{disabled:""}},[s._v("默认按钮")]),a("el-button",{attrs:{type:"primary",disabled:""}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"success",disabled:""}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"info",disabled:""}},[s._v("信息按钮")]),a("el-button",{attrs:{type:"warning",disabled:""}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger",disabled:""}},[s._v("危险按钮")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{attrs:{plain:"",disabled:""}},[s._v("朴素按钮")]),a("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"success",plain:"",disabled:""}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"info",plain:"",disabled:""}},[s._v("信息按钮")]),a("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[s._v("危险按钮")])],1)]),a("p",[s._v("你可以使用"),a("code",[s._v("disabled")]),s._v("属性来定义按钮是否可用，它接受一个"),a("code",[s._v("Boolean")]),s._v("值。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("默认按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("主要按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("成功按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("信息按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("警告按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("危险按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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\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("朴素按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("主要按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("成功按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("信息按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("警告按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("危险按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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")])])])]),s._m(3),a("p",[s._v("没有边框和背景色的按钮。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="text">文字按钮</el-button>\n<el-button type="text" disabled>文字按钮</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"}},[s._v("文字按钮")]),a("el-button",{attrs:{type:"text",disabled:""}},[s._v("文字按钮")])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("文字按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("文字按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">搜索</el-button>\n<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[s._v("搜索")]),a("el-button",{attrs:{type:"primary"}},[s._v("上传"),a("i",{staticClass:"el-icon-upload el-icon--right"})])],1),a("p",[s._v("设置"),a("code",[s._v("icon")]),s._v("属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用"),a("code",[s._v("i")]),s._v("标签即可，可以使用自定义图标。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("搜索"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("上传"),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-name"}},[s._v("i")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("以按钮组的方式出现，常用于多项类似操作。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button-group>\n <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>\n <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>\n</el-button-group>\n<el-button-group>\n <el-button type="primary" icon="el-icon-edit"></el-button>\n <el-button type="primary" icon="el-icon-share"></el-button>\n <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[s._v("上一页")]),a("el-button",{attrs:{type:"primary"}},[s._v("下一页"),a("i",{staticClass:"el-icon-arrow-right el-icon--right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1),a("p",[s._v("使用"),a("code",[s._v("<el-button-group>")]),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-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("上一页"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("下一页"),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-name"}},[s._v("i")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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")])])])]),s._m(6),a("p",[s._v("点击按钮后进行数据加载操作，在按钮上显示加载状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" :loading="true">加载中</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"primary",loading:!0}},[s._v("加载中")])],1),a("p",[s._v("要设置为 loading 状态，只要设置"),a("code",[s._v("loading")]),s._v("属性为"),a("code",[s._v("true")]),s._v("即可。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("加载中"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n <el-button>默认按钮</el-button>\n <el-button size="medium">中等按钮</el-button>\n <el-button size="small">小型按钮</el-button>\n <el-button size="mini">超小按钮</el-button>\n</div>\n<div style="margin-top: 20px">\n <el-button round>默认按钮</el-button>\n <el-button size="medium" round>中等按钮</el-button>\n <el-button size="small" round>小型按钮</el-button>\n <el-button size="mini" round>超小按钮</el-button>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-button",[s._v("默认按钮")]),a("el-button",{attrs:{size:"medium"}},[s._v("中等按钮")]),a("el-button",{attrs:{size:"small"}},[s._v("小型按钮")]),a("el-button",{attrs:{size:"mini"}},[s._v("超小按钮")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{attrs:{round:""}},[s._v("默认按钮")]),a("el-button",{attrs:{size:"medium",round:""}},[s._v("中等按钮")]),a("el-button",{attrs:{size:"small",round:""}},[s._v("小型按钮")]),a("el-button",{attrs:{size:"mini",round:""}},[s._v("超小按钮")])],1)]),a("p",[s._v("额外的尺寸："),a("code",[s._v("medium")]),s._v("、"),a("code",[s._v("small")]),s._v("、"),a("code",[s._v("mini")]),s._v("，通过设置"),a("code",[s._v("size")]),s._v("属性来配置它们。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("默认按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("中等按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("小型按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("超小按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("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("默认按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("中等按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("小型按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("超小按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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")])])])]),s._m(8),s._m(9)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button 按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"wen-zi-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 文字按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-biao-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图标按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-niu-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jia-zai-zhong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 加载中")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-tong-chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 不同尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("尺寸")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("类型")]),a("td",[s._v("string")]),a("td",[s._v("primary / success / warning / danger / info / text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("是否朴素按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("round")]),a("td",[s._v("是否圆形按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("是否加载中状态")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用状态")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("是否默认聚焦")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("原生 type 属性")]),a("td",[s._v("string")]),a("td",[s._v("button / submit / reset")]),a("td",[s._v("button")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(752)},function(s,t,a){"use strict";function l(s){a(753)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(755),e=a.n(n),r=a(756),v=a(0),_=l,c=v(e.a,r.a,!1,_,"data-v-51a1741d",null);t.default=c.exports},function(s,t,a){var l=a(754);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("c8e8f0f6",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,'.clearfix[data-v-51a1741d]:after{clear:both}.clearfix[data-v-51a1741d]:after,.clearfix[data-v-51a1741d]:before{display:table;content:""}.text[data-v-51a1741d]{font-size:14px}.time[data-v-51a1741d]{font-size:13px;color:#999}.bottom[data-v-51a1741d]{margin-top:13px;line-height:12px}.item[data-v-51a1741d]{margin-bottom:18px}.button[data-v-51a1741d]{padding:0;float:right}.image[data-v-51a1741d]{width:100%;display:block}.box-card[data-v-51a1741d]{width:480px}',""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(110),n=function(s){return s&&s.__esModule?s:{default:s}}(l);t.default={data:function(){return{currentDate:n.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("将信息聚合在卡片容器中展示。")]),s._m(1),l("p",[s._v("包含标题，内容和操作。")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-card class="box-card">\n <div slot="header" class="clearfix">\n <span>卡片名称</span>\n <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>\n </div>\n <div v-for="o in 4" :key="o" class="text item">\n {{\'列表内容 \' + o }}\n </div>\n</el-card>\n\n\n',script:null,style:'\n .text {\n font-size: 14px;\n }\n\n .item {\n 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("卡片名称")]),l("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[s._v("操作按钮")])],1),s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("列表内容 "+t)+"\n ")])})],2)],1),l("p",[s._v("Card 组件包括"),l("code",[s._v("header")]),s._v("和"),l("code",[s._v("body")]),s._v("部分，"),l("code",[s._v("header")]),s._v("部分需要有显式具名 slot 分发，同时也是可选的。")]),l("div",{staticClass:"highlight",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("卡片名称"),l("span",{attrs:{class:"hljs-tag"}},[s._v("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("span")]),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("操作按钮"),l("span",{attrs:{class:"hljs-tag"}},[s._v("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),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 {{'列表内容 ' + o }}\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),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(">")]),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("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),l("p",[s._v("卡片可以只有内容区域。")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-card class="box-card">\n <div v-for="o in 4" :key="o" class="text item">\n {{\'列表内容 \' + o }}\n </div>\n</el-card>\n\n\n',script:null,style:"\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .box-card {\n width: 480px;\n }\n"}}},[l("div",{staticClass:"source",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("列表内容 "+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 {{'列表内容 ' + o }}\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),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(">")]),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("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),l("p",[s._v("可配置定义更丰富的内容展示。")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n <el-card :body-style="{ padding: \'0px\' }">\n <img src="~examples/assets/images/hamburger.png" class="image">\n <div style="padding: 14px;">\n <span>好吃的汉堡</span>\n <div class="bottom clearfix">\n <time class="time">{{ currentDate }}</time>\n <el-button type="text" class="button">操作按钮</el-button>\n </div>\n </div>\n </el-card>\n </el-col>\n</el-row>\n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n currentDate: new Date()\n };\n }\n}\n",style:'\n .time {\n font-size: 13px;\n color: #999;\n }\n \n .bottom {\n margin-top: 13px;\n line-height: 12px;\n }\n\n .button {\n padding: 0;\n float: right;\n }\n\n .image {\n width: 100%;\n display: block;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n \n .clearfix:after {\n clear: both\n }\n'}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-row",s._l(2,function(t,n){return l("el-col",{key:t,attrs:{span:8,offset:n>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:a(620)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("好吃的汉堡")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("操作按钮")])],1)])])],1)}))],1),l("p",[s._v("配置"),l("code",[s._v("body-style")]),s._v("属性来自定义"),l("code",[s._v("body")]),s._v("部分的"),l("code",[s._v("style")]),s._v("，我们还使用了布局组件。")]),l("div",{staticClass:"highlight",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("好吃的汉堡"),l("span",{attrs:{class:"hljs-tag"}},[s._v("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("span")]),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("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("time")]),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("操作按钮"),l("span",{attrs:{class:"hljs-tag"}},[s._v("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("div")]),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(">")]),s._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[s._v("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[s._v("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),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("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("</"),l("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card-qia-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card 卡片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jian-dan-qia-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-dan-qia-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 简单卡片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-tu-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带图片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("设置 header，也可以通过 "),a("code",{pre:!0},[s._v("slot#header")]),s._v(" 传入 DOM")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("设置 body 的样式")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(758)},function(s,t,a){"use strict";function l(s){a(759)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(761),e=a.n(n),r=a(762),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(760);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("094b1c6c",l,!0)},function(s,t,a){t=s.exports=a(109)(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("在有限空间内，循环播放同一类型的图片、文字等内容")]),s._m(1),a("p",[s._v("适用广泛的基础用法")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">默认 Hover 指示器触发</span>\n <el-carousel height="150px">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n </div>\n <div class="block">\n <span class="demonstration">Click 指示器触发</span>\n <el-carousel trigger="click" height="150px">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n </div>\n</template>\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 150px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n \n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认 Hover 指示器触发")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Click 指示器触发")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("结合使用"),a("code",[s._v("el-carousel")]),s._v("和"),a("code",[s._v("el-carousel-item")]),s._v("标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在"),a("code",[s._v("el-carousel-item")]),s._v("标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置"),a("code",[s._v("trigger")]),s._v("属性为"),a("code",[s._v("click")]),s._v("，可以达到点击触发的效果。")]),a("div",{staticClass:"highlight",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("默认 Hover 指示器触发"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),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("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("Click 指示器触发"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可以将指示器的显示位置设置在容器外部")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-carousel indicator-position="outside">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n \n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n \n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",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",[a("code",[s._v("indicator-position")]),s._v("属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为"),a("code",[s._v("outside")]),s._v("则会显示在外部；设置为"),a("code",[s._v("none")]),s._v("则不会显示指示器。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以设置切换箭头的显示时机")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-carousel :interval="5000" arrow="always">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n \n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n \n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",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",[a("code",[s._v("arrow")]),s._v("属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将"),a("code",[s._v("arrow")]),s._v("设置为"),a("code",[s._v("always")]),s._v("，则会一直显示；设置为"),a("code",[s._v("never")]),s._v("，则会一直隐藏。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-carousel :interval="4000" type="card" height="200px">\n <el-carousel-item v-for="item in 6" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 200px;\n margin: 0;\n }\n \n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n \n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",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("将"),a("code",[s._v("type")]),s._v("属性设置为"),a("code",[s._v("card")]),s._v("即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel-zou-ma-deng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-zou-ma-deng","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel 走马灯")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-shi-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-shi-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 指示器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qie-huan-jian-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qie-huan-jian-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 切换箭头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qia-pian-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 卡片化")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("走马灯的高度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("初始状态激活的幻灯片的索引，从 0 开始")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("指示器的触发方式")]),a("td",[s._v("string")]),a("td",[s._v("click")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("是否自动切换")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("自动切换的时间间隔，单位为毫秒")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("指示器的位置")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("切换箭头的显示时机")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("走马灯的类型")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("幻灯片切换时触发")]),a("td",[s._v("目前激活的幻灯片的索引，原幻灯片的索引")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("手动切换幻灯片")]),a("td",[s._v("需要切换的幻灯片的索引，从 0 开始；或相应 "),a("code",{pre:!0},[s._v("el-carousel-item")]),s._v(" 的 "),a("code",{pre:!0},[s._v("name")]),s._v(" 属性值")])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("切换至上一张幻灯片")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("切换至下一张幻灯片")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("幻灯片的名字，可用作 "),a("code",{pre:!0},[s._v("setActiveItem")]),s._v(" 的参数")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("该幻灯片所对应指示器的文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(764)},function(s,t,a){"use strict";function l(s){a(765)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(767),e=a.n(n),r=a(768),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(766);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("7ef31fd2",l,!0)},function(s,t,a){t=s.exports=a(109)(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:"江苏",cities:[]},{label:"浙江",cities:[]}],props:{value:"label",children:"cities"},options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["zujian","data","tag"]}},created:function(){this.optionsWithDisabled=JSON.parse(JSON.stringify(this.options)),this.optionsWithDisabled[0].disabled=!0},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[s.length-1].style.padding="0"})},methods:{handleItemChange:function(s){var t=this;console.log("active item:",s),setTimeout(function(a){s.indexOf("江苏")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"南京"}]:s.indexOf("浙江")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"杭州"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t,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("当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。")]),s._m(1),a("p",[s._v("有两种触发子菜单的方式")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">默认 click 触发子菜单</span>\n <el-cascader :options="options" v-model="selectedOptions" @change="handleChange">\n </el-cascader>\n</div>\n<div class="block">\n <span class="demonstration">hover 触发子菜单</span>\n <el-cascader expand-trigger="hover" :options="options" v-model="selectedOptions2" @change="handleChange">\n </el-cascader>\n</div>\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'zhinan',\n label: '指南',\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }],\n selectedOptions: [],\n selectedOptions2: []\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认 click 触发子菜单")]),a("el-cascader",{attrs:{options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions,callback:function(t){s.selectedOptions=t},expression:"selectedOptions"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("hover 触发子菜单")]),a("el-cascader",{attrs:{"expand-trigger":"hover",options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions2,callback:function(t){s.selectedOptions2=t},expression:"selectedOptions2"}})],1)]),a("p",[s._v("只需为 Cascader 的"),a("code",[s._v("options")]),s._v("属性指定选项数组即可渲染出一个级联选择器。通过"),a("code",[s._v("expand-trigger")]),s._v("可以定义展开子级菜单的触发方式。本例还展示了"),a("code",[s._v("change")]),s._v("事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("默认 click 触发子菜单"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),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("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("hover 触发子菜单"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),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\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("'zhinan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'指南'")]),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("'shejiyuanze'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),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("'yizhi'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'导航'")]),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("'cexiangdaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),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("'zujian'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件'")]),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("'ziyuan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'资源'")]),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("'jiaohu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="optionsWithDisabled"></el-cascader>\n\n',script:"\n export default {\n data() {\n return {\n optionsWithDisabled: [{\n value: 'zhinan',\n label: '指南',\n disabled: true,\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),a("p",[s._v("本例中，"),a("code",[s._v("options")]),s._v("指定的数组中的第一个元素含有"),a("code",[s._v("disabled: true")]),s._v("键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的"),a("code",[s._v("disabled")]),s._v("字段是否为"),a("code",[s._v("true")]),s._v("，如果你的数据中表示禁用含义的字段名不为"),a("code",[s._v("disabled")]),s._v("，可以通过"),a("code",[s._v("props")]),s._v("属性来指定（详见下方 API 表格）。当然，"),a("code",[s._v("value")]),s._v("、"),a("code",[s._v("label")]),s._v("和"),a("code",[s._v("children")]),s._v("这三个字段名也可以通过同样的方式指定。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),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("'zhinan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'指南'")]),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("'shejiyuanze'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),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("'yizhi'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'导航'")]),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("'cexiangdaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),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("'zujian'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件'")]),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("'ziyuan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'资源'")]),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("'jiaohu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" :show-all-levels="false"></el-cascader>\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'zhinan',\n label: '指南',\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("属性"),a("code",[s._v("show-all-levels")]),s._v("定义了是否显示完整的路径，将其赋值为"),a("code",[s._v("false")]),s._v("则仅显示最后一级")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),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("'zhinan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'指南'")]),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("'shejiyuanze'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),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("'yizhi'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'导航'")]),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("'cexiangdaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),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("'zujian'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件'")]),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("'ziyuan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'资源'")]),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("'jiaohu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" v-model="selectedOptions3"></el-cascader>\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'zhinan',\n label: '指南',\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }],\n selectedOptions3: ['zujian', 'data', 'tag']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(t){s.selectedOptions3=t},expression:"selectedOptions3"}})],1),a("p",[s._v("默认值通过数组的方式指定。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),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("'zhinan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'指南'")]),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("'shejiyuanze'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),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("'yizhi'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'导航'")]),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("'cexiangdaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),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("'zujian'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件'")]),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("'ziyuan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'资源'")]),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("'jiaohu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedOptions3")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'zujian'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" change-on-select></el-cascader>\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'zhinan',\n label: '指南',\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),a("p",[s._v("若需要允许用户选择任意一级选项，则可将"),a("code",[s._v("change-on-select")]),s._v("赋值为"),a("code",[s._v("true")])]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),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("'zhinan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'指南'")]),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("'shejiyuanze'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),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("'yizhi'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'导航'")]),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("'cexiangdaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),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("'zujian'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件'")]),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("'ziyuan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'资源'")]),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("'jiaohu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("当选中某一级时，动态加载该级下的选项。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options2" @active-item-change="handleItemChange" :props="props"></el-cascader>\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n label: '江苏',\n cities: []\n }, {\n label: '浙江',\n cities: []\n }],\n props: {\n value: 'label',\n children: 'cities'\n }\n };\n },\n\n methods: {\n handleItemChange(val) {\n console.log('active item:', val);\n setTimeout(_ => {\n if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {\n this.options2[0].cities = [{\n label: '南京'\n }];\n } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {\n this.options2[1].cities = [{\n label: '杭州'\n }];\n }\n }, 300);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),a("p",[s._v("本例的选项数据源在初始化时不包含城市数据。利用"),a("code",[s._v("active-item-change")]),s._v("事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了"),a("code",[s._v("props")]),s._v("属性的用法。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),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("'江苏'")]),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("'浙江'")]),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("'江苏'")]),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("'南京'")]),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("'浙江'")]),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("'杭州'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可以快捷地搜索选项并选择。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">只可选择最后一级菜单的选项</span>\n <el-cascader placeholder="试试搜索：指南" :options="options" filterable></el-cascader>\n</div>\n<div class="block">\n <span class="demonstration">可选择任意一级菜单的选项</span>\n <el-cascader placeholder="试试搜索：指南" :options="options" filterable="" change-on-select></el-cascader>\n</div>\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'zhinan',\n label: '指南',\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("只可选择最后一级菜单的选项")]),a("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:""}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("可选择任意一级菜单的选项")]),a("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:"","change-on-select":""}})],1)]),a("p",[s._v("将"),a("code",[s._v("filterable")]),s._v("赋值为"),a("code",[s._v("true")]),s._v("即可打开搜索功能。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("只可选择最后一级菜单的选项"),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-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"试试搜索：指南"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),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("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("可选择任意一级菜单的选项"),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-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"试试搜索：指南"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),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\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("'zhinan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'指南'")]),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("'shejiyuanze'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),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("'yizhi'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'导航'")]),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("'cexiangdaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),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("'zujian'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件'")]),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("'ziyuan'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'资源'")]),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("'jiaohu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"cascader-ji-lian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader-ji-lian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader 级联选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过在数据源中设置 "),a("code",{pre:!0},[s._v("disabled")]),s._v(" 字段来声明该选项是禁用的")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-xian-shi-zui-hou-yi-ji"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-xian-shi-zui-hou-yi-ji","aria-hidden":"true"}},[s._v("¶")]),s._v(" 仅显示最后一级")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mo-ren-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 默认值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ji-gai-bian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ji-gai-bian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择即改变")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-jia-zai-ci-ji-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-jia-zai-ci-ji-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态加载次级选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("options")]),a("td",[s._v("可选项数据源，键名可通过 "),a("code",{pre:!0},[s._v("props")]),s._v(" 属性配置")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("配置选项，具体见下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("选中项绑定值")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("separator")]),a("td",[s._v("选项分隔符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("斜杠'/'")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("自定义浮层类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("请选择")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否支持清空选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-trigger")]),a("td",[s._v("次级菜单的展开方式")]),a("td",[s._v("string")]),a("td",[s._v("click / hover")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("show-all-levels")]),a("td",[s._v("输入框中是否显示选中值的完整路径")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("是否可搜索选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("搜索关键词输入的去抖延迟，毫秒")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("是否允许选择任意一级的选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("尺寸")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-filter")]),a("td",[s._v("筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选")]),a("td",[s._v("function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("指定选项的值为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("指定选项标签为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("指定选项的子选项为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("指定选项的禁用为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发的事件")]),a("td",[s._v("当前值")])]),a("tr",[a("td",[s._v("active-item-change")]),a("td",[s._v("当父级选项变化时触发的事件，仅在 "),a("code",{pre:!0},[s._v("change-on-select")]),s._v(" 为 "),a("code",{pre:!0},[s._v("false")]),s._v(" 时可用")]),a("td",[s._v("各父级选项组成的数组")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(770)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(771),n=a.n(l),e=a(772),r=a(0),v=r(n.a,e.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";var l=["上海","北京","广州","深圳"];s.exports={data:function(){return{checkList:["选中且禁用","复选框 A"],checked:!0,checked1:!1,checked2:!0,checked3:!0,checked4:!1,checked5:!1,checked6:!0,isValid:"可用",checkAll:!1,cities:l,checkedCities:["上海","北京"],checkedCities1:["上海","北京"],isIndeterminate:!0,checkboxGroup1:["上海"],checkboxGroup2:["上海"],checkboxGroup3:["上海"],checkboxGroup4:["上海"],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<this.cities.length}}}},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("一组备选项中进行多选")]),s._m(1),a("p",[s._v("单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n \x3c!-- `checked` 为 true 或 false --\x3e\n <el-checkbox v-model="checked">备选项</el-checkbox>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{model:{value:s.checked,callback:function(t){s.checked=t},expression:"checked"}},[s._v("备选项")])]],2),a("p",[s._v("在"),a("code",[s._v("el-checkbox")]),s._v("元素中定义"),a("code",[s._v("v-model")]),s._v("绑定变量，单一的"),a("code",[s._v("checkbox")]),s._v("中，默认绑定变量的值会是"),a("code",[s._v("Boolean")]),s._v("，选中为"),a("code",[s._v("true")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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` 为 true 或 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("备选项"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("多选框不可用状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>\n <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(t){s.checked1=t},expression:"checked1"}},[s._v("备选项1")]),a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(t){s.checked2=t},expression:"checked2"}},[s._v("备选项")])]],2),a("p",[s._v("设置"),a("code",[s._v("disabled")]),s._v("属性即可。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("备选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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("备选项"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-checkbox-group v-model="checkList">\n <el-checkbox label="复选框 A"></el-checkbox>\n <el-checkbox label="复选框 B"></el-checkbox>\n <el-checkbox label="复选框 C"></el-checkbox>\n <el-checkbox label="禁用" disabled></el-checkbox>\n <el-checkbox label="选中且禁用" disabled></el-checkbox>\n </el-checkbox-group>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n checkList: ['选中且禁用','复选框 A']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox-group",{model:{value:s.checkList,callback:function(t){s.checkList=t},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"复选框 A"}}),a("el-checkbox",{attrs:{label:"复选框 B"}}),a("el-checkbox",{attrs:{label:"复选框 C"}}),a("el-checkbox",{attrs:{label:"禁用",disabled:""}}),a("el-checkbox",{attrs:{label:"选中且禁用",disabled:""}})],1)]],2),a("p",[a("code",[s._v("checkbox-group")]),s._v("元素能把多个 checkbox 管理为一组，只需要在 Group 中使用"),a("code",[s._v("v-model")]),s._v("绑定"),a("code",[s._v("Array")]),s._v("类型的变量即可。 "),a("code",[s._v("el-checkbox")]),s._v(" 的 "),a("code",[s._v("label")]),s._v("属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。"),a("code",[s._v("label")]),s._v("与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"复选框 A"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"复选框 B"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"复选框 C"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"禁用"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"选中且禁用"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'选中且禁用'")]),s._v(","),a("span",{attrs:{class:"hljs-string"}},[s._v("'复选框 A'")]),s._v("]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>\n <div style="margin: 15px 0;"></div>\n <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n </el-checkbox-group>\n</template>\n\n',script:"\n const cityOptions = ['上海', '北京', '广州', '深圳'];\n export default {\n data() {\n return {\n checkAll: false,\n checkedCities: ['上海', '北京'],\n cities: cityOptions,\n isIndeterminate: true\n };\n },\n methods: {\n handleCheckAllChange(val) {\n this.checkedCities = val ? cityOptions : [];\n this.isIndeterminate = false;\n },\n handleCheckedCitiesChange(value) {\n let checkedCount = value.length;\n this.checkAll = checkedCount === this.cities.length;\n this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{attrs:{indeterminate:s.isIndeterminate},on:{change:s.handleCheckAllChange},model:{value:s.checkAll,callback:function(t){s.checkAll=t},expression:"checkAll"}},[s._v("全选")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{on:{change:s.handleCheckedCitiesChange},model:{value:s.checkedCities,callback:function(t){s.checkedCities=t},expression:"checkedCities"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],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("全选"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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("</"),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('"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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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(">")]),s._v("\n"),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("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("'上海'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'广州'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'深圳'")]),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("'上海'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'北京'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-checkbox-group v-model="checkedCities1" :min="1" :max="2">\n <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n </el-checkbox-group>\n</template>\n\n',script:"\n const cityOptions = ['上海', '北京', '广州', '深圳'];\n export default {\n data() {\n return {\n checkedCities1: ['上海', '北京'],\n cities: cityOptions\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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(">")]),s._v("\n"),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("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("'上海'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'广州'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'深圳'")]),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("'上海'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'北京'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("按钮样式的多选组合。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div>\n <el-checkbox-group v-model="checkboxGroup1">\n <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup2" size="medium">\n <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup3" size="small">\n <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'北京\'" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n</template>\n\n',script:"\n const cityOptions = ['上海', '北京', '广州', '深圳'];\n export default {\n data () {\n return {\n checkboxGroup1: ['上海'],\n checkboxGroup2: ['上海'],\n checkboxGroup3: ['上海'],\n checkboxGroup4: ['上海'],\n cities: cityOptions\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(t){s.checkboxGroup1=t},expression:"checkboxGroup1"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))],1),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:"北京"===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("只需要把"),a("code",[s._v("el-checkbox")]),s._v("元素替换为"),a("code",[s._v("el-checkbox-button")]),s._v("元素即可。此外，Element 还提供了"),a("code",[s._v("size")]),s._v("属性。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),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(">")]),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),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(">")]),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("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 === '北京'\"")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),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(">")]),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),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(">")]),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("template")]),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("'上海'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'广州'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'深圳'")]),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("checkboxGroup1")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup2")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup3")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup4")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div>\n <el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>\n <el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>\n <el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup5" size="small">\n <el-checkbox label="备选项1" border></el-checkbox>\n <el-checkbox label="备选项2" border disabled></el-checkbox>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n <el-checkbox label="备选项1" border></el-checkbox>\n <el-checkbox label="备选项2" border></el-checkbox>\n </el-checkbox-group>\n </div>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n checked3: true,\n checked4: false,\n checked5: false,\n checked6: true,\n checkboxGroup5: [],\n checkboxGroup6: []\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-checkbox",{attrs:{label:"备选项1",border:""},model:{value:s.checked3,callback:function(t){s.checked3=t},expression:"checked3"}}),a("el-checkbox",{attrs:{label:"备选项2",border:""},model:{value:s.checked4,callback:function(t){s.checked4=t},expression:"checked4"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox",{attrs:{label:"备选项1",border:"",size:"medium"},model:{value:s.checked5,callback:function(t){s.checked5=t},expression:"checked5"}}),a("el-checkbox",{attrs:{label:"备选项2",border:"",size:"medium"},model:{value:s.checked6,callback:function(t){s.checked6=t},expression:"checked6"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup5,callback:function(t){s.checkboxGroup5=t},expression:"checkboxGroup5"}},[a("el-checkbox",{attrs:{label:"备选项1",border:""}}),a("el-checkbox",{attrs:{label:"备选项2",border:"",disabled:""}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup6,callback:function(t){s.checkboxGroup6=t},expression:"checkboxGroup6"}},[a("el-checkbox",{attrs:{label:"备选项1",border:""}}),a("el-checkbox",{attrs:{label:"备选项2",border:""}})],1)],1)]],2),a("p",[s._v("设置"),a("code",[s._v("border")]),s._v("属性可以渲染为带有边框的多选框。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"备选项1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"备选项2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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("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('"备选项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(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"备选项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(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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("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('"备选项1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"备选项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(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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(">")]),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("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('"备选项1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"备选项2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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(">")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox-duo-xuan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-duo-xuan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox 多选框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-xuan-kuang-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-kuang-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多选框组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" indeterminate 状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("indeterminate")]),s._v(" 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-xuan-xiang-mu-shu-liang-de-xian-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-xiang-mu-shu-liang-de-xian-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可选项目数量的限制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",{pre:!0},[s._v("min")]),s._v(" 和 "),a("code",{pre:!0},[s._v("max")]),s._v(" 属性能够限制可以被勾选的项目的数量。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-niu-yang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮样式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-bian-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有边框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("选中状态的值（只有在"),a("code",{pre:!0},[s._v("checkbox-group")]),s._v("或者绑定对象类型为"),a("code",{pre:!0},[s._v("array")]),s._v("时有效）")]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("选中时的值")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("没有选中时的值")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("是否显示边框")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("Checkbox 的尺寸，仅在 border 为真时有效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("当前是否勾选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("设置 indeterminate 状态，只负责样式控制")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,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("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发的事件")]),a("td",[s._v("更新后的值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("可被勾选的 checkbox 的最小数量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("可被勾选的 checkbox 的最大数量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("按钮形式的 Checkbox 激活时的文本颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("按钮形式的 Checkbox 激活时的填充色和边框色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发的事件")]),a("td",[s._v("更新后的值")])])])])},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("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("选中状态的值（只有在"),a("code",{pre:!0},[s._v("checkbox-group")]),s._v("或者绑定对象类型为"),a("code",{pre:!0},[s._v("array")]),s._v("时有效）")]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("选中时的值")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("没有选中时的值")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("当前是否勾选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(774)},function(s,t,a){"use strict";function l(s){a(775)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(777),e=a.n(n),r=a(778),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(776);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("411cb1b2",l,!0)},function(s,t,a){t=s.exports=a(109)(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("通过折叠面板收纳内容区域")]),s._m(1),a("p",[s._v("可同时展开多个面板，面板之间不影响")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse v-model="activeNames" @change="handleChange">\n <el-collapse-item title="一致性 Consistency" name="1">\n <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n </el-collapse-item>\n <el-collapse-item title="反馈 Feedback" name="2">\n <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n </el-collapse-item>\n <el-collapse-item title="效率 Efficiency" name="3">\n <div>简化流程：设计简洁直观的操作流程；</div>\n <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n </el-collapse-item>\n <el-collapse-item title="可控 Controllability" name="4">\n <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n </el-collapse-item>\n</el-collapse>\n\n',script:"\n export default {\n data() {\n return {\n activeNames: ['1']\n };\n },\n methods: {\n handleChange(val) {\n console.log(val);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(t){s.activeNames=t},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),a("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),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("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),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-collapse-item")]),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("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),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("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),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-collapse-item")]),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("简化流程：设计简洁直观的操作流程；"),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("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),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("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),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-collapse-item")]),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("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),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("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),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-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("每次只能展开一个面板")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse v-model="activeName" accordion>\n <el-collapse-item title="一致性 Consistency" name="1">\n <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n </el-collapse-item>\n <el-collapse-item title="反馈 Feedback" name="2">\n <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n </el-collapse-item>\n <el-collapse-item title="效率 Efficiency" name="3">\n <div>简化流程：设计简洁直观的操作流程；</div>\n <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n </el-collapse-item>\n <el-collapse-item title="可控 Controllability" name="4">\n <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n </el-collapse-item>\n</el-collapse>\n\n',script:"\n export default {\n data() {\n return {\n activeName: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),a("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("p",[s._v("通过 "),a("code",[s._v("accordion")]),s._v(" 属性来设置是否以手风琴模式显示。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),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("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),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-collapse-item")]),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("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),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("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),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-collapse-item")]),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("简化流程：设计简洁直观的操作流程；"),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("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),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("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),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-collapse-item")]),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("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),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("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),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-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse accordion>\n <el-collapse-item>\n <template slot="title">\n 一致性 Consistency<i class="header-icon el-icon-info"></i>\n </template>\n <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n </el-collapse-item>\n <el-collapse-item title="反馈 Feedback">\n <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n </el-collapse-item>\n <el-collapse-item title="效率 Efficiency">\n <div>简化流程：设计简洁直观的操作流程；</div>\n <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n </el-collapse-item>\n <el-collapse-item title="可控 Controllability">\n <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n </el-collapse-item>\n</el-collapse>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("\n 一致性 Consistency"),a("i",{staticClass:"header-icon el-icon-info"})]),a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])],2),a("el-collapse-item",{attrs:{title:"反馈 Feedback"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n "),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("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),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("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),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-collapse-item")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),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("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),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-collapse-item")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),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("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),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("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),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-collapse-item")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),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("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),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-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse-zhe-die-mian-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhe-die-mian-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse 折叠面板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-feng-qin-xiao-guo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-xiao-guo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手风琴效果")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mian-ban-biao-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mian-ban-biao-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义面板标题")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("除了可以通过 "),a("code",{pre:!0},[s._v("title")]),s._v(" 属性以外，还可以通过具名 "),a("code",{pre:!0},[s._v("slot")]),s._v(" 来实现自定义面板的标题内容，以实现增加图标等效果。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("是否手风琴模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("当前激活的面板(如果是手风琴模式，绑定值类型需要为"),a("code",{pre:!0},[s._v("string")]),s._v("，否则为"),a("code",{pre:!0},[s._v("array")]),s._v(")")]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当前激活面板改变时触发(如果是手风琴模式，参数 "),a("code",{pre:!0},[s._v("activeNames")]),s._v(" 类型为"),a("code",{pre:!0},[s._v("string")]),s._v("，否则为"),a("code",{pre:!0},[s._v("array")]),s._v(")")]),a("td",[s._v("(activeNames: array|string)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("唯一标志符")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("面板标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(780)},function(s,t,a){"use strict";function l(s){a(781)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(783),e=a.n(n),r=a(784),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(782);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("5d8bf22a",l,!0)},function(s,t,a){t=s.exports=a(109)(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("用于颜色选择，支持多种格式。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">有默认值</span>\n <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n <span class="demonstration">无默认值</span>\n <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n\n',script:"\n export default {\n data() {\n return {\n color1: '#409EFF',\n color2: null\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("有默认值")]),a("el-color-picker",{model:{value:s.color1,callback:function(t){s.color1=t},expression:"color1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("无默认值")]),a("el-color-picker",{model:{value:s.color2,callback:function(t){s.color2=t},expression:"color2"}})],1)]),a("p",[s._v("使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("有默认值"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),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("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("无默认值"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-color-picker v-model="color3" show-alpha></el-color-picker>\n\n\n',script:"\n export default {\n data() {\n return {\n color3: 'rgba(19, 206, 102, 0.8)'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(t){s.color3=t},expression:"color3"}})],1),a("p",[s._v("ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过"),a("code",[s._v("show-alpha")]),s._v("属性即可控制是否支持透明度的选择。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker-yan-se-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker 颜色选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-tou-ming-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-tou-ming-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择透明度")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-tong-chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 不同尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("尺寸")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("medium / small / mini")])]),a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("是否支持透明度选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("写入 v-model 的颜色的格式")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex（show-alpha 为 false）/ rgb（show-alpha 为 true）")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("ColorPicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发")]),a("td",[s._v("当前值")])]),a("tr",[a("td",[s._v("active-change")]),a("td",[s._v("面板中当前显示的颜色发生改变时触发")]),a("td",[s._v("当前显示的颜色值")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(786)},function(s,t,a){"use strict";function l(s){a(787)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(789),e=a(0),r=l,v=e(null,n.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var l=a(788);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("972950a2",l,!0)},function(s,t,a){t=s.exports=a(109)(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:#67c23a}.bg-warning{background-color:#e6a23c}.bg-danger{background-color:#f56c6c}.bg-info{background-color:#909399}.bg-text-primary{background-color:#303133}.bg-text-regular{background-color:#606266}.bg-text-secondary{background-color:#909399}.bg-text-placeholder{background-color:#c0c4cc}.bg-border-base{background-color:#dcdfe6}.bg-border-light{background-color:#e4e7ed}.bg-border-lighter{background-color:#ebeef5}.bg-border-extra-light{background-color:#f2f6fc}[class*=" bg-border-"]{color:#303133}',""])},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 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。")]),s._m(1),a("p",[s._v("Element 主要品牌颜色是鲜艳、友好的蓝色。")]),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("除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。")]),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("中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。")]),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("主要文字"),a("div",{staticClass:"value"},[s._v("#303133")])]),a("div",{staticClass:"demo-color-box bg-text-regular"},[s._v("常规文字"),a("div",{staticClass:"value"},[s._v("#606266")])]),a("div",{staticClass:"demo-color-box bg-text-secondary"},[s._v("次要文字"),a("div",{staticClass:"value"},[s._v("#909399")])]),a("div",{staticClass:"demo-color-box bg-text-placeholder"},[s._v("占位文字"),a("div",{staticClass:"value"},[s._v("#C0C4CC")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-border-base"},[s._v("一级边框"),a("div",{staticClass:"value"},[s._v("#DCDFE6")])]),a("div",{staticClass:"demo-color-box bg-border-light"},[s._v("二级边框"),a("div",{staticClass:"value"},[s._v("#E4E7ED")])]),a("div",{staticClass:"demo-color-box bg-border-lighter"},[s._v("三级边框"),a("div",{staticClass:"value"},[s._v("#EBEEF5")])]),a("div",{staticClass:"demo-color-box bg-border-extra-light"},[s._v("四级边框"),a("div",{staticClass:"value"},[s._v("#F2F6FC")])])])])],1)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color-se-cai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-se-cai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color 色彩")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhu-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhu-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 主色")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-zhu-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 辅助色")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhong-xing-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhong-xing-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 中性色")])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(791)},function(s,t,a){"use strict";function l(s){a(792)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(794),e=a.n(n),r=a(795),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(793);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("d3de94fe",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,"#chang-jian-ye-mian-bu-ju+.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}#chang-jian-ye-mian-bu-ju+.demo-container .el-footer,#chang-jian-ye-mian-bu-ju+.demo-container .el-header{text-align:center}#chang-jian-ye-mian-bu-ju+.demo-container .el-aside{background-color:#d3dce6;text-align:center;line-height:200px}#chang-jian-ye-mian-bu-ju+.demo-container .el-main{background-color:#e9eef3;color:#333;text-align:center;line-height:160px}#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container{margin-bottom:40px}#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(5) .el-aside,#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(6) .el-aside{line-height:260px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){var s={date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"};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("用于布局的容器组件，方便快速搭建页面的基本结构：")]),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:'<el-container>\n <el-header>Header</el-header>\n <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n <el-header>Header</el-header>\n <el-main>Main</el-main>\n <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n <el-aside width="200px">Aside</el-aside>\n <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n <el-header>Header</el-header>\n <el-container>\n <el-aside width="200px">Aside</el-aside>\n <el-main>Main</el-main>\n </el-container>\n</el-container>\n\n<el-container>\n <el-header>Header</el-header>\n <el-container>\n <el-aside width="200px">Aside</el-aside>\n <el-container>\n <el-main>Main</el-main>\n <el-footer>Footer</el-footer>\n </el-container>\n </el-container>\n</el-container>\n\n<el-container>\n <el-aside width="200px">Aside</el-aside>\n <el-container>\n <el-header>Header</el-header>\n <el-main>Main</el-main>\n </el-container>\n</el-container>\n\n<el-container>\n <el-aside width="200px">Aside</el-aside>\n <el-container>\n <el-header>Header</el-header>\n <el-main>Main</el-main>\n <el-footer>Footer</el-footer>\n </el-container>\n</el-container>\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),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("</"),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-container")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),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("</"),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-footer")]),s._v(">")]),s._v("Footer"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),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("</"),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-container")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),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("</"),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-container")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),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("</"),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-footer")]),s._v(">")]),s._v("Footer"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),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-container")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),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("</"),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-container")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),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("</"),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-footer")]),s._v(">")]),s._v("Footer"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),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-container")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-container style="height: 500px; border: 1px solid #eee">\n <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n <el-menu :default-openeds="[\'1\', \'3\']">\n <el-submenu index="1">\n <template slot="title"><i class="el-icon-message"></i>导航一</template>\n <el-menu-item-group>\n <template slot="title">分组一</template>\n <el-menu-item index="1-1">选项1</el-menu-item>\n <el-menu-item index="1-2">选项2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="分组2">\n <el-menu-item index="1-3">选项3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">选项4</template>\n <el-menu-item index="1-4-1">选项4-1</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-submenu index="2">\n <template slot="title"><i class="el-icon-menu"></i>导航二</template>\n <el-menu-item-group>\n <template slot="title">分组一</template>\n <el-menu-item index="2-1">选项1</el-menu-item>\n <el-menu-item index="2-2">选项2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="分组2">\n <el-menu-item index="2-3">选项3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="2-4">\n <template slot="title">选项4</template>\n <el-menu-item index="2-4-1">选项4-1</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-submenu index="3">\n <template slot="title"><i class="el-icon-setting"></i>导航三</template>\n <el-menu-item-group>\n <template slot="title">分组一</template>\n <el-menu-item index="3-1">选项1</el-menu-item>\n <el-menu-item index="3-2">选项2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="分组2">\n <el-menu-item index="3-3">选项3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="3-4">\n <template slot="title">选项4</template>\n <el-menu-item index="3-4-1">选项4-1</el-menu-item>\n </el-submenu>\n </el-submenu>\n </el-menu>\n </el-aside>\n \n <el-container>\n <el-header style="text-align: right; font-size: 12px">\n <el-dropdown>\n <i class="el-icon-setting" style="margin-right: 15px"></i>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>查看</el-dropdown-item>\n <el-dropdown-item>新增</el-dropdown-item>\n <el-dropdown-item>删除</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n <span>王小虎</span>\n </el-header>\n \n <el-main>\n <el-table :data="tableData">\n <el-table-column prop="date" label="日期" width="140">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="120">\n </el-table-column>\n <el-table-column prop="address" label="地址">\n </el-table-column>\n </el-table>\n </el-main>\n </el-container>\n</el-container>\n\n\n\n\n',script:"\n export default {\n data() {\n const item = {\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n };\n return {\n tableData: Array(20).fill(item)\n }\n }\n };\n",style:"\n .el-header {\n background-color: #B3C0D1;\n color: #333;\n line-height: 60px;\n }\n \n .el-aside {\n color: #333;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[a("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[a("el-menu",{attrs:{"default-openeds":["1","3"]}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("导航一")]),a("el-menu-item-group",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("分组一")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("选项2")])],2),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("选项4-1")])],2)],2),a("el-submenu",{attrs:{index:"2"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-menu"}),s._v("导航二")]),a("el-menu-item-group",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("分组一")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("选项2")])],2),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("选项4-1")])],2)],2),a("el-submenu",{attrs:{index:"3"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-setting"}),s._v("导航三")]),a("el-menu-item-group",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("分组一")]),a("el-menu-item",{attrs:{index:"3-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"3-2"}},[s._v("选项2")])],2),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"3-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"3-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"3-4-1"}},[s._v("选项4-1")])],2)],2)],1)],1),a("el-container",[a("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[a("el-dropdown",[a("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("查看")]),a("el-dropdown-item",[s._v("新增")]),a("el-dropdown-item",[s._v("删除")])],1)],1),a("span",[s._v("王小虎")])],1),a("el-main",[a("el-table",{attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"140"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)],1)],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),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-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("分组一"),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-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("选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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('"分组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("选项3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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("选项4"),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-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("选项4-1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),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-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("分组一"),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-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("选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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('"分组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("选项3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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("选项4"),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-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("选项4-1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),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-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("分组一"),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-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("选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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('"分组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("选项3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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("选项4"),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-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("选项4-1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("查看"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("新增"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("删除"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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(">")]),s._v("王小虎"),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-header")]),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('"日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"地址"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),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("\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-container")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"container-bu-ju-rong-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#container-bu-ju-rong-qi","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("<el-container>")]),s._v("：外层容器。当子元素中包含 "),a("code",{pre:!0},[s._v("<el-header>")]),s._v(" 或 "),a("code",{pre:!0},[s._v("<el-footer>")]),s._v(" 时，全部子元素会垂直上下排列，否则会水平左右排列。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("<el-header>")]),s._v("：顶栏容器。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("<el-aside>")]),s._v("：侧边栏容器。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("<el-main>")]),s._v("：主要区域容器。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("<el-footer>")]),s._v("：底栏容器。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，"),a("code",{pre:!0},[s._v("<el-container>")]),s._v(" 的子元素只能是后四者，后四者的父元素也只能是 "),a("code",{pre:!0},[s._v("<el-container>")]),s._v("。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chang-jian-ye-mian-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-ye-mian-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 常见页面布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shi-li"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-li","aria-hidden":"true"}},[s._v("¶")]),s._v(" 实例")])},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("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("direction")]),a("td",[s._v("子元素的排列方向")]),a("td",[s._v("string")]),a("td",[s._v("horizontal / vertical")]),a("td",[s._v("子元素中有 "),a("code",{pre:!0},[s._v("el-header")]),s._v(" 或 "),a("code",{pre:!0},[s._v("el-footer")]),s._v(" 时为 vertical，否则为 horizontal")])])])])},function(){var s=this,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("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("顶栏高度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("60px")])])])])},function(){var s=this,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("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("width")]),a("td",[s._v("侧边栏宽度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("300px")])])])])},function(){var s=this,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("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("底栏高度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("60px")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(797)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(798),n=a(0),e=n(null,l.a,!1,null,null,null);t.default=e.exports},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"zi-ding-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义主题")]),a("p",[s._v("Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了三种方法，可以进行不同程度的样式自定义。")]),a("h3",{attrs:{id:"jin-ti-huan-zhu-ti-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-ti-huan-zhu-ti-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 仅替换主题色")]),a("p",[s._v("如果仅希望更换 Element 的主题色，推荐使用"),a("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview"}},[s._v("在线主题生成工具")]),s._v("。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。")]),a("p",[s._v("使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。")]),a("h3",{attrs:{id:"zai-xiang-mu-zhong-gai-bian-scss-bian-liang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zai-xiang-mu-zhong-gai-bian-scss-bian-liang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 在项目中改变 SCSS 变量")]),a("p",[s._v("Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v("，写入以下内容：")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[s._v("/* 改变主题色变量 */\n$--color-primary: teal;\n\n/* 改变 icon 字体路径变量，必需 */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),a("p",[s._v("之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：")]),a("pre",{pre:!0},[a("code",{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("需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。")])]),a("h3",{attrs:{id:"ming-ling-xing-zhu-ti-gong-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ming-ling-xing-zhu-ti-gong-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 命令行主题工具")]),a("p",[s._v("如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：")]),a("h4",{attrs:{id:"an-zhuang-gong-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang-gong-ju","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("安装工具")])]),a("p",[s._v("首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("# 从 npm\nnpm i element-theme-chalk -D\n\n# 从 GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),a("h4",{attrs:{id:"chu-shi-hua-bian-liang-wen-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chu-shi-hua-bian-liang-wen-jian","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("初始化变量文件")])]),a("p",[s._v("主题生成工具安装成功后，如果全局安装可以在命令行里通过 "),a("code",{pre:!0},[s._v("et")]),s._v(" 调用工具，如果安装在当前目录下，需要通过 "),a("code",{pre:!0},[s._v("node_modules/.bin/et")]),s._v(" 访问到命令。执行 "),a("code",{pre:!0},[s._v("-i")]),s._v(" 初始化变量文件。默认输出到 "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v("，当然你可以传参数指定文件输出目录。")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("et -i [可以自定义变量文件]\n\n> ✔ Generator variables file\n")])]),a("p",[s._v("如果使用默认配置，执行后当前目录会有一个 "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v(" 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：")]),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:"xiu-gai-bian-liang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("修改变量")])]),a("p",[s._v("直接编辑 "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v(" 文件，例如修改主题色为红色。")]),a("pre",{pre:!0},[a("code",{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:"bian-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("编译主题")])]),a("p",[s._v("保存文件后，到命令行里执行 "),a("code",{pre:!0},[s._v("et")]),s._v(" 编译主题，如果你想启用 "),a("code",{pre:!0},[s._v("watch")]),s._v(" 模式，实时编译主题，增加 "),a("code",{pre:!0},[s._v("-w")]),s._v(" 参数；如果你在初始化时指定了自定义变量文件，则需要增加 "),a("code",{pre:!0},[s._v("-c")]),s._v(" 参数，并带上你的变量文件名")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h4",{attrs:{id:"yin-ru-zi-ding-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-zi-ding-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("引入自定义主题")])]),a("p",[s._v("默认情况下编译的主题目录是放在 "),a("code",{pre:!0},[s._v("./theme")]),s._v(" 下，你可以通过 "),a("code",{pre:!0},[s._v("-o")]),s._v(" 参数指定打包目录。像引入默认主题一样，在代码里直接引用 "),a("code",{pre:!0},[s._v("theme/index.css")]),s._v(" 文件即可。")]),a("pre",{pre:!0},[a("code",{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:"da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("搭配插件按需引入组件主题")])]),a("p",[s._v("如果是搭配 "),a("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(" 一起使用，只需要修改 "),a("code",{pre:!0},[s._v(".babelrc")]),s._v(" 的配置，指定 "),a("code",{pre:!0},[s._v("styleLibraryName")]),s._v(" 路径为自定义主题相对于 "),a("code",{pre:!0},[s._v(".babelrc")]),s._v(" 的路径，注意要加 "),a("code",{pre:!0},[s._v("~")]),s._v("。")]),a("pre",{pre:!0},[a("code",{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("如果不清楚 "),a("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(" 是什么，请阅读 "),a("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},[s._v("快速上手")]),s._v(" 一节。更多 "),a("code",{pre:!0},[s._v("element-theme")]),s._v(" 用法请参考"),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("项目仓库")]),s._v("。")])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(800)},function(s,t,a){"use strict";function l(s){a(801)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(803),e=a.n(n),r=a(804),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(802);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("6a07bd6a",l,!0)},function(s,t,a){t=s.exports=a(109)(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:"今天",onClick:function(s){s.$emit("pick",new Date)}},{text:"昨天",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"一周前",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"最近一个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"最近三个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:""}}}},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("用于选择或输入日期")]),s._m(1),a("p",[s._v("以「日」为基本单位，基础的日期选择控件")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-date-picker v-model="value1" type="date" placeholder="选择日期">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">带快捷选项</span>\n <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1">\n </el-date-picker>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions1: {\n disabledDate(time) {\n return time.getTime() > Date.now();\n },\n shortcuts: [{\n text: '今天',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: '昨天',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: '一周前',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: '',\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"date",placeholder:"选择日期"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{align:"right",type:"date",placeholder:"选择日期","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("基本单位由"),a("code",[s._v("type")]),s._v("属性指定。快捷选项需配置"),a("code",[s._v("picker-options")]),s._v("对象中的"),a("code",[s._v("shortcuts")]),s._v("，禁用日期通过 "),a("code",[s._v("disabledDate")]),s._v(" 设置，传入函数")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("默认"),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-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('"选择日期"')]),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(">")]),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("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("带快捷选项"),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-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("align")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),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('"选择日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),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("template")]),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("'今天'")]),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("'昨天'")]),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("'一周前'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("通过扩展基础的日期选择，可以选择周、月、年")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">周</span>\n <el-date-picker v-model="value3" type="week" format="yyyy 第 WW 周" placeholder="选择周">\n </el-date-picker>\n</div>\n<div class="block">\n <span class="demonstration">月</span>\n <el-date-picker v-model="value4" type="month" placeholder="选择月">\n </el-date-picker>\n</div>\n<div class="block">\n <span class="demonstration">年</span>\n <el-date-picker v-model="value5" align="right" type="year" placeholder="选择年">\n </el-date-picker>\n</div>\n\n\n',script:"\n export default {\n data() {\n return {\n value3: '',\n value4: '',\n value5: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("周")]),a("el-date-picker",{attrs:{type:"week",format:"yyyy 第 WW 周",placeholder:"选择周"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("月")]),a("el-date-picker",{attrs:{type:"month",placeholder:"选择月"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("年")]),a("el-date-picker",{attrs:{align:"right",type:"year",placeholder:"选择年"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]),a("div",{staticClass:"highlight",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("周"),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-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('"yyyy 第 WW 周"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),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-date-picker")]),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("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("月"),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-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('"选择月"')]),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(">")]),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("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("年"),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-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("align")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),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('"选择年"')]),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(">")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可在一个选择器中便捷地选择一个时间范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-date-picker v-model="value6" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">带快捷选项</span>\n <el-date-picker v-model="value7" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">\n </el-date-picker>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: '最近一周',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: '最近一个月',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: '最近三个月',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value6: '',\n value7: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"daterange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用"),a("code",[s._v("unlink-panels")]),s._v("属性解除联动。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("默认"),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-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('"至"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),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-date-picker")]),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("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("带快捷选项"),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-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('"至"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"结束日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),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("template")]),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("'最近一周'")]),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("'最近一个月'")]),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("'最近三个月'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">date</span>\n <el-date-picker v-model="value8" type="date" placeholder="选择日期" default-value="2010-10-01">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">daterange</span>\n <el-date-picker v-model="value9" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" default-value="2010-10-01">\n </el-date-picker>\n </div>\n</template>\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:"选择日期","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","start-placeholder":"开始日期","end-placeholder":"结束日期","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("</"),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-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('"选择日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),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("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("</"),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-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("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"结束日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">默认为 Date 对象</span>\n <div class="demonstration">组件值：{{ value10 }}</div>\n <el-date-picker v-model="value10" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">使用 value-format 进行格式化</span>\n <div class="demonstration">组件值：{{ value11 }}</div>\n <el-date-picker v-model="value11" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">\n </el-date-picker>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value10: '',\n value11: '',\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认为 Date 对象")]),a("div",{staticClass:"demonstration"},[s._v("组件值："+s._s(s.value10))]),a("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("使用 value-format 进行格式化")]),a("div",{staticClass:"demonstration"},[s._v("组件值："+s._s(s.value11))]),a("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日","value-format":"yyyy-MM-dd"},model:{value:s.value11,callback:function(t){s.value11=t},expression:"value11"}})],1)]],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("</"),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("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("组件值：{{ value10 }}"),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-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('"选择日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),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("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("使用 value-format 进行格式化"),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("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("组件值：{{ value11 }}"),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-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('"选择日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),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("template")]),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 };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker-ri-qi-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-ri-qi-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker 日期选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ri"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择日")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qi-ta-ri-qi-dan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-ri-qi-dan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 其他日期单位")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择日期范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mo-ren-xian-shi-ri-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-xian-shi-ri-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 默认显示日期")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("未选择日期时，默认显示今天的日历。使用"),a("code",{pre:!0},[s._v("default-value")]),s._v("可以指定其他日期，该值需要能够被"),a("code",{pre:!0},[s._v("new Date()")]),s._v("解析。\n类型为"),a("code",{pre:!0},[s._v("daterange")]),s._v("时，指定左侧日历的日期。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fan-hui-zhi-ge-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fan-hui-zhi-ge-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 返回值格式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("默认情况下，组件接受并返回"),a("code",{pre:!0},[s._v("Date")]),s._v("对象。\n使用"),a("code",{pre:!0},[s._v("value-format")]),s._v("指定返回值的格式，支持的格式与"),a("code",{pre:!0},[s._v("format")]),s._v("相同。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("该功能处于测试阶段，欢迎提供反馈。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("非范围选择时的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("范围选择时开始日期的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("范围选择时结束日期的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("显示类型")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/week/ datetime/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("显示在输入框中的格式")]),a("td",[s._v("string")]),a("td",[s._v("年 "),a("code",{pre:!0},[s._v("yyyy")]),s._v("，月 "),a("code",{pre:!0},[s._v("MM")]),s._v("，日 "),a("code",{pre:!0},[s._v("dd")]),s._v("，小时 "),a("code",{pre:!0},[s._v("HH")]),s._v("，分 "),a("code",{pre:!0},[s._v("mm")]),s._v("，秒 "),a("code",{pre:!0},[s._v("ss")]),s._v("，AM/PM "),a("code",{pre:!0},[s._v("A")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("DatePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("选择范围时的分隔符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("可选，选择器打开时默认显示的时间")]),a("td",[s._v("Date")]),a("td",[s._v("可被"),a("code",{pre:!0},[s._v("new Date()")]),s._v("解析")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value-format")]),a("td",[s._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),a("td",[s._v("string")]),a("td",[s._v("年 "),a("code",{pre:!0},[s._v("yyyy")]),s._v("，月 "),a("code",{pre:!0},[s._v("MM")]),s._v("，日 "),a("code",{pre:!0},[s._v("dd")]),s._v("，小时 "),a("code",{pre:!0},[s._v("HH")]),s._v("，分 "),a("code",{pre:!0},[s._v("mm")]),s._v("，秒 "),a("code",{pre:!0},[s._v("ss")]),s._v("，AM/PM "),a("code",{pre:!0},[s._v("A")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unlink-panels")]),a("td",[s._v("在范围选择器里取消两个日期面板之间的联动")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),a("td",[s._v("Object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),a("td",[s._v("Function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("周起始日")]),a("td",[s._v("Number")]),a("td",[s._v("1 到 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("选中日期后会执行的回调，只有当 "),a("code",{pre:!0},[s._v("daterange")]),s._v(" 或 "),a("code",{pre:!0},[s._v("datetimerange")]),s._v(" 才生效")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" Shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("标题文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("用户确认选定的值时触发")]),a("td",[s._v("组件绑定值。格式与绑定值一致，可受 "),a("code",{pre:!0},[s._v("value-format")]),s._v(" 控制")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("当 input 失去焦点时触发")]),a("td",[s._v("组件实例")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("当 input 获得焦点时触发")]),a("td",[s._v("组件实例")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("使 input 获取焦点")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(806)},function(s,t,a){"use strict";function l(s){a(807)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(809),e=a.n(n),r=a(810),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(808);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("72f3a1cc",l,!0)},function(s,t,a){t=s.exports=a(109)(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:"今天",onClick:function(s){s.$emit("pick",new Date)}},{text:"昨天",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"一周前",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"最近一个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"最近三个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:"",value15:"",value16:""}}}},function(s,t,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("在同一个选择器里选择日期和时间")]),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">带快捷选项</span>\n <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions1">\n </el-date-picker>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions1: {\n shortcuts: [{\n text: '今天',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: '昨天',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: '一周前',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间",align:"right","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("通过设置"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("datetime")]),s._v("，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("默认"),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-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('"选择日期时间"')]),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(">")]),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("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("带快捷选项"),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-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('"选择日期时间"')]),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(":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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),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("template")]),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("'今天'")]),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("'昨天'")]),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("'一周前'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-date-picker v-model="value3" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">带快捷选项</span>\n <el-date-picker v-model="value4" type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">\n </el-date-picker>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: '最近一周',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: '最近一个月',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: '最近三个月',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value4: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"datetimerange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,"range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期",align:"right"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("type")]),s._v("为"),a("code",[s._v("datetimerange")]),s._v("即可选择日期和时间范围")]),a("div",{staticClass:"highlight",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("默认"),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-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('"至"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),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-date-picker")]),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("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("带快捷选项"),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-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('"至"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"结束日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),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("template")]),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("'最近一周'")]),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("'最近一个月'")]),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("'最近三个月'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker-ri-qi-shi-jian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker-ri-qi-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker 日期时间选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("DateTimePicker 由 DatePicker 和 TimePicker 派生，"),a("code",{pre:!0},[s._v("Picker Options")]),s._v(" 或者其他选项可以参照 DatePicker 和 TimePicker。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ri-qi-he-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 日期和时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ri-qi-he-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 日期和时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("非范围选择时的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("范围选择时开始日期的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("范围选择时结束日期的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("time-arrow-control")]),a("td",[s._v("是否使用箭头进行时间选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("显示类型")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/week/ datetime/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("显示在输入框中的格式")]),a("td",[s._v("string")]),a("td",[s._v("年 "),a("code",{pre:!0},[s._v("yyyy")]),s._v("，月 "),a("code",{pre:!0},[s._v("MM")]),s._v("，日 "),a("code",{pre:!0},[s._v("dd")]),s._v("，小时 "),a("code",{pre:!0},[s._v("HH")]),s._v("，分 "),a("code",{pre:!0},[s._v("mm")]),s._v("，秒 "),a("code",{pre:!0},[s._v("ss")]),s._v("，AM/PM "),a("code",{pre:!0},[s._v("A")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("DateTimePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("选择范围时的分隔符")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("可选，选择器打开时默认显示的时间")]),a("td",[s._v("Date")]),a("td",[s._v("可被"),a("code",{pre:!0},[s._v("new Date()")]),s._v("解析")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value-format")]),a("td",[s._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),a("td",[s._v("string")]),a("td",[s._v("年 "),a("code",{pre:!0},[s._v("yyyy")]),s._v("，月 "),a("code",{pre:!0},[s._v("MM")]),s._v("，日 "),a("code",{pre:!0},[s._v("dd")]),s._v("，小时 "),a("code",{pre:!0},[s._v("HH")]),s._v("，分 "),a("code",{pre:!0},[s._v("mm")]),s._v("，秒 "),a("code",{pre:!0},[s._v("ss")]),s._v("，AM/PM "),a("code",{pre:!0},[s._v("A")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unlink-panels")]),a("td",[s._v("在范围选择器里取消两个日期面板之间的联动")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),a("td",[s._v("Object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),a("td",[s._v("Function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("周起始日")]),a("td",[s._v("Number")]),a("td",[s._v("1 到 7")]),a("td",[s._v("7")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" Shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("标题文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("用户确认选定的值时触发")]),a("td",[s._v("组件绑定值。格式与绑定值一致，可受 "),a("code",{pre:!0},[s._v("value-format")]),s._v(" 控制")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("当 input 失去焦点时触发")]),a("td",[s._v("组件实例")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("当 input 获得焦点时触发")]),a("td",[s._v("组件实例")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("使 input 获取焦点")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(812)},function(s,t,a){"use strict";function l(s){a(813)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(815),e=a.n(n),r=a(816),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(814);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("2166732a",l,!0)},function(s,t,a){t=s.exports=a(109)(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:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,outerVisible:!1,innerVisible:!1,centerDialogVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"80px"}},methods:{handleClose:function(s){this.$confirm("确认关闭？").then(function(t){s()}).catch(function(s){})}}}},function(s,t,a){"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("在保留当前页面状态的情况下，告知用户并承载相关操作。")]),s._m(1),a("p",[s._v("Dialog 弹出一个对话框，适合需要定制性更大的场景。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">\n <span>这是一段信息</span>\n <span slot="footer" class="dialog-footer">\n <el-button @click="dialogVisible = false">取 消</el-button>\n <el-button type="primary" @click="dialogVisible = false">确 定</el-button>\n </span>\n</el-dialog>\n\n\n',script:"\n export default {\n data() {\n return {\n dialogVisible: false\n };\n },\n methods: {\n handleClose(done) {\n this.$confirm('确认关闭？')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("点击打开 Dialog")]),a("el-dialog",{attrs:{title:"提示",visible:s.dialogVisible,width:"30%","before-close":s.handleClose},on:{"update:visible":function(t){s.dialogVisible=t}}},[a("span",[s._v("这是一段信息")]),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("确 定")])],1)])],1),a("p",[s._v("需要设置"),a("code",[s._v("visible")]),s._v("属性，它接收"),a("code",[s._v("Boolean")]),s._v("，当为"),a("code",[s._v("true")]),s._v("时显示 Dialog。Dialog 分为两个部分："),a("code",[s._v("body")]),s._v("和"),a("code",[s._v("footer")]),s._v("，"),a("code",[s._v("footer")]),s._v("需要具名为"),a("code",[s._v("footer")]),s._v("的"),a("code",[s._v("slot")]),s._v("。"),a("code",[s._v("title")]),s._v("属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了"),a("code",[s._v("before-close")]),s._v("的用法。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("点击打开 Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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('"提示"')]),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("这是一段信息"),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("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("取 消"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("确 定"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-dialog")]),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("'确认关闭？'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("p",[s._v("Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogTableVisible">\n <el-table :data="gridData">\n <el-table-column property="date" label="日期" width="150"></el-table-column>\n <el-table-column property="name" label="姓名" width="200"></el-table-column>\n <el-table-column property="address" label="地址"></el-table-column>\n </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogFormVisible">\n <el-form :model="form">\n <el-form-item label="活动名称" :label-width="formLabelWidth">\n <el-input v-model="form.name" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="活动区域" :label-width="formLabelWidth">\n <el-select v-model="form.region" placeholder="请选择活动区域">\n <el-option label="区域一" value="shanghai"></el-option>\n <el-option label="区域二" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n </el-form>\n <div slot="footer" class="dialog-footer">\n <el-button @click="dialogFormVisible = false">取 消</el-button>\n <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>\n </div>\n</el-dialog>\n\n\n',script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }],\n dialogTableVisible: false,\n dialogFormVisible: false,\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n formLabelWidth: '120px'\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("打开嵌套表格的 Dialog")]),a("el-dialog",{attrs:{title:"收货地址",visible:s.dialogTableVisible},on:{"update:visible":function(t){s.dialogTableVisible=t}}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"姓名",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"地址"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("打开嵌套表单的 Dialog")]),a("el-dialog",{attrs:{title:"收货地址",visible:s.dialogFormVisible},on:{"update:visible":function(t){s.dialogFormVisible=t}}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"活动名称","label-width":s.formLabelWidth}},[a("el-input",{attrs:{"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:"活动区域","label-width":s.formLabelWidth}},[a("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:s.form.region,callback:function(t){s.$set(s.form,"region",t)},expression:"form.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1)],1),a("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("确 定")])],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("打开嵌套表格的 Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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('"收货地址"')]),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('"日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"地址"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),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("打开嵌套表单的 Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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('"收货地址"')]),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('"活动名称"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"活动区域"')]),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('"请选择活动区域"')]),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('"区域一"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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('"区域二"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),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-form")]),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('"dialogFormVisible = false"')]),s._v(">")]),s._v("取 消"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("确 定"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-dialog")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>\n \n <el-dialog title="外层 Dialog" :visible.sync="outerVisible">\n <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>\n </el-dialog>\n <div slot="footer" class="dialog-footer">\n <el-button @click="outerVisible = false">取 消</el-button>\n <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>\n </div>\n </el-dialog>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n outerVisible: false,\n innerVisible: false\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.outerVisible=!0}}},[s._v("点击打开外层 Dialog")]),a("el-dialog",{attrs:{title:"外层 Dialog",visible:s.outerVisible},on:{"update:visible":function(t){s.outerVisible=t}}},[a("el-dialog",{attrs:{width:"30%",title:"内层 Dialog",visible:s.innerVisible,"append-to-body":""},on:{"update:visible":function(t){s.innerVisible=t}}}),a("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.outerVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.innerVisible=!0}}},[s._v("打开内层 Dialog")])],1)],1)]],2),a("p",[s._v("正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了"),a("code",[s._v("append-to-body")]),s._v("属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("点击打开外层 Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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('"外层 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('"内层 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),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("取 消"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("打开内层 Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-dialog")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("标题和底部可水平居中")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>\n <span>需要注意的是内容是默认不居中的</span>\n <span slot="footer" class="dialog-footer">\n <el-button @click="centerDialogVisible = false">取 消</el-button>\n <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>\n </span>\n</el-dialog>\n\n\n',script:"\n export default {\n data() {\n return {\n centerDialogVisible: false\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.centerDialogVisible=!0}}},[s._v("点击打开 Dialog")]),a("el-dialog",{attrs:{title:"提示",visible:s.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(t){s.centerDialogVisible=t}}},[a("span",[s._v("需要注意的是内容是默认不居中的")]),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.centerDialogVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.centerDialogVisible=!1}}},[s._v("确 定")])],1)])],1),a("p",[s._v("将 "),a("code",[s._v("center")]),s._v(" 设置为 "),a("code",[s._v("true")]),s._v(" 即可使标题和底部居中。")]),a("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("点击打开 Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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('"提示"')]),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("需要注意的是内容是默认不居中的"),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("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("取 消"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("确 定"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-dialog")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog-dui-hua-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog-dui-hua-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog 对话框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("code",{pre:!0},[s._v("before-close")]),s._v(" 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 "),a("code",{pre:!0},[s._v("footer")]),s._v(" 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 "),a("code",{pre:!0},[s._v("before-close")]),s._v(" 的相关逻辑。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qian-tao-de-dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-de-dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" 嵌套的 Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 "),a("code",{pre:!0},[s._v("append-to-body")]),s._v(" 属性。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ju-zhong-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 居中布局")])},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(" 仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("如果 "),a("code",{pre:!0},[s._v("visible")]),s._v(" 属性绑定的变量位于 Vuex 的 store 内，那么 "),a("code",{pre:!0},[s._v(".sync")]),s._v(" 不会正常工作。此时需要去除 "),a("code",{pre:!0},[s._v(".sync")]),s._v(" 修饰符，同时监听 Dialog 的 "),a("code",{pre:!0},[s._v("open")]),s._v(" 和 "),a("code",{pre:!0},[s._v("close")]),s._v(" 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 "),a("code",{pre:!0},[s._v("visible")]),s._v(" 属性绑定的变量的值。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("visible")]),a("td",[s._v("是否显示 Dialog，支持 .sync 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("Dialog 的标题，也可通过具名 slot （见下表）传入")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("Dialog 的宽度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("50%")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("是否为全屏 Dialog")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("Dialog CSS 中的 margin-top 值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15vh")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("是否需要遮罩层")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("append-to-body")]),a("td",[s._v("Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("是否在 Dialog 出现时将 body 滚动锁定")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("Dialog 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("是否可以通过点击 modal 关闭 Dialog")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("是否可以通过按下 ESC 关闭 Dialog")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("是否显示关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("before-close")]),a("td",[s._v("关闭前的回调，会暂停 Dialog 的关闭")]),a("td",[s._v("function(done)，done 用于关闭 Dialog")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("是否对头部和底部采用居中布局")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("Dialog 的内容")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("Dialog 标题区的内容")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("Dialog 按钮操作区的内容")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("Dialog 关闭的回调")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("Dialog 打开的回调")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(818)},function(s,t,a){"use strict";function l(s){a(819),a(821),a(823)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(825),e=a.n(n),r=a(826),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(820);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("2d988cfa",l,!0)},function(s,t,a){t=s.exports=a(109)(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){var l=a(822);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("c7c0c38a",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,".el-dropdown-link{cursor:pointer;color:#409eff}.el-icon-arrow-down{font-size:12px}",""])},function(s,t,a){var l=a(824);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("0aa6af7c",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,".el-dropdown-link{cursor:pointer;color:#409eff}.el-icon-arrow-down{font-size:12px}.demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},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("将动作或菜单折叠到下拉菜单中。")]),s._m(1),a("p",[s._v("移动到下拉菜单上，展开更多操作。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n <span class="el-dropdown-link">\n 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n 下拉菜单"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("通过组件"),a("code",[s._v("slot")]),s._v("来设置下拉触发的元素以及需要通过具名"),a("code",[s._v("slot")]),s._v("为"),a("code",[s._v("dropdown")]),s._v(" 来设置下拉菜单。默认情况下，下拉按钮只要"),a("code",[s._v("hover")]),s._v("即可，无需点击也会显示下拉菜单。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 下拉菜单"),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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-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("黄金糕"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("狮子头"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("螺蛳粉"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("双皮奶"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("蚵仔煎"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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")])])])]),s._m(2),a("p",[s._v("可使用按钮触发下拉菜单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n <el-button type="primary">\n 更多菜单<i class="el-icon-arrow-down el-icon--right"></i>\n </el-button>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item>双皮奶</el-dropdown-item>\n <el-dropdown-item>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n 更多菜单\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item>双皮奶</el-dropdown-item>\n <el-dropdown-item>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n\n\n\n\n',script:"\n export default {\n methods: {\n handleClick() {\n alert('button click');\n }\n }\n }\n",style:"\n .el-dropdown {\n vertical-align: top;\n }\n .el-dropdown + .el-dropdown {\n margin-left: 15px;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n 更多菜单"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n 更多菜单\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("设置"),a("code",[s._v("split-button")]),s._v("属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为"),a("code",[s._v("true")]),s._v("即可。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 更多菜单"),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("\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("黄金糕"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("狮子头"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("螺蛳粉"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("双皮奶"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("蚵仔煎"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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("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 更多菜单\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("黄金糕"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("狮子头"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("螺蛳粉"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("双皮奶"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("蚵仔煎"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("p",[s._v("可以配置 click 激活或者 hover 激活。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="block-col-2">\n <el-col :span="12">\n <span class="demonstration">hover 激活</span>\n <el-dropdown>\n <span class="el-dropdown-link">\n 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item>双皮奶</el-dropdown-item>\n <el-dropdown-item>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </el-col>\n <el-col :span="12">\n <span class="demonstration">click 激活</span>\n <el-dropdown trigger="click">\n <span class="el-dropdown-link">\n 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item>双皮奶</el-dropdown-item>\n <el-dropdown-item>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </el-col>\n</el-row>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover 激活")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n 下拉菜单"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click 激活")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n 下拉菜单"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1)],1)],1),a("p",[s._v("在"),a("code",[s._v("trigger")]),s._v("属性设置为"),a("code",[s._v("click")]),s._v("即可。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 激活"),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-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 下拉菜单"),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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-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("黄金糕"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("狮子头"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("螺蛳粉"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("双皮奶"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("蚵仔煎"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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("el-col")]),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 激活"),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-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 下拉菜单"),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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-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("黄金糕"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("狮子头"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("螺蛳粉"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("双皮奶"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("蚵仔煎"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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("el-col")]),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")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown :hide-on-click="false">\n <span class="el-dropdown-link">\n 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n 下拉菜单"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("下拉菜单默认在点击菜单项后会被隐藏，将"),a("code",[s._v("hide-on-click")]),s._v("属性默认为"),a("code",[s._v("false")]),s._v("可以关闭此功能。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 下拉菜单"),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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-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("黄金糕"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("狮子头"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("螺蛳粉"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("双皮奶"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("蚵仔煎"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown @command="handleCommand">\n <span class="el-dropdown-link">\n 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item command="a">黄金糕</el-dropdown-item>\n <el-dropdown-item command="b">狮子头</el-dropdown-item>\n <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>\n <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>\n <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n\n\n\n',script:"\n export default {\n methods: {\n handleCommand(command) {\n this.$message('click on item ' + command);\n }\n }\n }\n",style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n 下拉菜单"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("黄金糕")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("狮子头")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 下拉菜单"),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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-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("黄金糕"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("狮子头"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("螺蛳粉"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("双皮奶"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("蚵仔煎"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown split-button type="primary">\n 默认尺寸\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item>双皮奶</el-dropdown-item>\n <el-dropdown-item>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n 中等尺寸\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item>双皮奶</el-dropdown-item>\n <el-dropdown-item>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n 小型尺寸\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item>双皮奶</el-dropdown-item>\n <el-dropdown-item>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n 超小尺寸\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item>双皮奶</el-dropdown-item>\n <el-dropdown-item>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[s._v("\n 默认尺寸\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1),a("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[s._v("\n 中等尺寸\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1),a("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[s._v("\n 小型尺寸\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1),a("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[s._v("\n 超小尺寸\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("额外的尺寸："),a("code",[s._v("medium")]),s._v("、"),a("code",[s._v("small")]),s._v("、"),a("code",[s._v("mini")]),s._v("，通过设置"),a("code",[s._v("size")]),s._v("属性来配置它们。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 默认尺寸\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("黄金糕"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("狮子头"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("螺蛳粉"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("双皮奶"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("蚵仔煎"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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\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 中等尺寸\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("黄金糕"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("狮子头"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("螺蛳粉"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("双皮奶"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("蚵仔煎"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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\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 小型尺寸\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("黄金糕"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("狮子头"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("螺蛳粉"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("双皮奶"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("蚵仔煎"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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\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 超小尺寸\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("黄金糕"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("狮子头"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("螺蛳粉"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("双皮奶"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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("蚵仔煎"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),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(">")]),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")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown-xia-la-cai-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-xia-la-cai-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown 下拉菜单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hong-fa-dui-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-dui-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 触发对象")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hong-fa-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 触发方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"cai-dan-yin-cang-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cai-dan-yin-cang-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 菜单隐藏方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("可以"),a("code",{pre:!0},[s._v("hide-on-click")]),s._v("属性来配置。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-ling-shi-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ling-shi-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 指令事件")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-tong-chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 不同尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("菜单按钮类型，同 Button 组件(只在"),a("code",{pre:!0},[s._v("split-button")]),s._v("为 true 的情况下有效)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("菜单尺寸，在"),a("code",{pre:!0},[s._v("split-button")]),s._v("为 true 的情况下也对触发按钮生效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("下拉触发元素呈现为按钮组")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("菜单弹出位置")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),a("td",[s._v("bottom-end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("触发下拉的行为")]),a("td",[s._v("string")]),a("td",[s._v("hover, click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("是否在点击菜单项后隐藏菜单")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-timeout")]),a("td",[s._v("展开下拉菜单的延时")]),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("收起下拉菜单的延时")]),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("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[a("code",{pre:!0},[s._v("split-button")]),s._v(" 为 true 时，点击左侧按钮的回调")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("点击菜单项触发的事件回调")]),a("td",[s._v("dropdown-item 的指令")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("下拉框出现/隐藏时触发")]),a("td",[s._v("出现则为 true，隐藏则为 false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("指令")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("显示分割线")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(828)},function(s,t,a){"use strict";function l(s){a(829)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(831),e=a.n(n),r=a(832),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(830);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("7f3b8628",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,'.demo-form.demo-zh-CN .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-zh-CN .el-select .el-input{width:380px}.demo-form.demo-zh-CN .el-form{width:460px}.demo-form.demo-zh-CN .line{text-align:center}.demo-form.demo-zh-CN .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-zh-CN .el-checkbox-group:after,.demo-form.demo-zh-CN .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-zh-CN .demo-form-normal{width:460px}.demo-form.demo-zh-CN .demo-form-inline{width:auto}.demo-form.demo-zh-CN .demo-form-inline .el-input{width:150px}.demo-form.demo-zh-CN .demo-form-inline>*{margin-right:10px}.demo-form.demo-zh-CN .demo-ruleForm{width:460px}.demo-form.demo-zh-CN .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-zh-CN .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-zh-CN .fr{float:right}',""])},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("年龄不能为空"));setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("必须年满18岁")):a():a(new Error("请输入数字值"))},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",rules:{name:[{required:!0,message:"请输入活动名称",trigger:"blur"},{min:3,max:5,message:"长度在 3 到 5 个字符",trigger:"blur"}],region:[{required:!0,message:"请选择活动区域",trigger:"change"}],date1:[{type:"date",required:!0,message:"请选择日期",trigger:"change"}],date2:[{type:"date",required:!0,message:"请选择时间",trigger:"change"}],type:[{type:"array",required:!0,message:"请至少选择一个活动性质",trigger:"change"}],resource:[{required:!0,message:"请选择活动资源",trigger:"change"}],desc:[{required:!0,message:"请填写活动形式",trigger:"blur"}]},rules2:{pass:[{validator:function(t,a,l){""===a?l(new Error("请输入密码")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},trigger:"blur"}],checkPass:[{validator:function(t,a,l){""===a?l(new Error("请再次输入密码")):a!==s.ruleForm2.pass?l(new Error("两次输入密码不一致!")):l()},trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{value:"",key:Date.now()}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},submitForm:function(s){this.$refs[s].validate(function(s){if(!s)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({value:"",key:Date.now()})}}}},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("由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据")]),s._m(1),a("p",[s._v("包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form ref="form" :model="form" label-width="80px">\n <el-form-item label="活动名称">\n <el-input v-model="form.name"></el-input>\n </el-form-item>\n <el-form-item label="活动区域">\n <el-select v-model="form.region" placeholder="请选择活动区域">\n <el-option label="区域一" value="shanghai"></el-option>\n <el-option label="区域二" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="活动时间">\n <el-col :span="11">\n <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>\n </el-col>\n </el-form-item>\n <el-form-item label="即时配送">\n <el-switch v-model="form.delivery"></el-switch>\n </el-form-item>\n <el-form-item label="活动性质">\n <el-checkbox-group v-model="form.type">\n <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n <el-checkbox label="地推活动" name="type"></el-checkbox>\n <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="特殊资源">\n <el-radio-group v-model="form.resource">\n <el-radio label="线上品牌商赞助"></el-radio>\n <el-radio label="线下场地免费"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label="活动形式">\n <el-input type="textarea" v-model="form.desc"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="onSubmit">立即创建</el-button>\n <el-button>取消</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"80px"}},[a("el-form-item",{attrs:{label:"活动名称"}},[a("el-input",{model:{value:s.form.name,callback:function(t){s.$set(s.form,"name",t)},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:s.form.region,callback:function(t){s.$set(s.form,"region",t)},expression:"form.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"活动时间"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:s.form.date1,callback:function(t){s.$set(s.form,"date1",t)},expression:"form.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"选择时间"},model:{value:s.form.date2,callback:function(t){s.$set(s.form,"date2",t)},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"即时配送"}},[a("el-switch",{model:{value:s.form.delivery,callback:function(t){s.$set(s.form,"delivery",t)},expression:"form.delivery"}})],1),a("el-form-item",{attrs:{label:"活动性质"}},[a("el-checkbox-group",{model:{value:s.form.type,callback:function(t){s.$set(s.form,"type",t)},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),a("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),a("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),a("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"特殊资源"}},[a("el-radio-group",{model:{value:s.form.resource,callback:function(t){s.$set(s.form,"resource",t)},expression:"form.resource"}},[a("el-radio",{attrs:{label:"线上品牌商赞助"}}),a("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),a("el-form-item",{attrs:{label:"活动形式"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(t){s.$set(s.form,"desc",t)},expression:"form.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("立即创建")]),a("el-button",[s._v("取消")])],1)],1)],1),a("p",[s._v("在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"80px"')]),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('"活动名称"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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('"请选择活动区域"')]),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('"区域一"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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('"区域二"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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('"选择日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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('"选择时间"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),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(">")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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('"美食/餐厅线上活动"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"地推活动"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"线下主题活动"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"单纯品牌曝光"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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(">")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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('"线上品牌商赞助"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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('"线下场地免费"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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(">")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-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("立即创建"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("取消"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-form")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("p",[s._v("当垂直方向空间受限且表单较简单时，可以在一行内放置表单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :inline="true" :model="formInline" class="demo-form-inline">\n <el-form-item label="审批人">\n <el-input v-model="formInline.user" placeholder="审批人"></el-input>\n </el-form-item>\n <el-form-item label="活动区域">\n <el-select v-model="formInline.region" placeholder="活动区域">\n <el-option label="区域一" value="shanghai"></el-option>\n <el-option label="区域二" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="onSubmit">查询</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n formInline: {\n user: '',\n region: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"审批人"}},[a("el-input",{attrs:{placeholder:"审批人"},model:{value:s.formInline.user,callback:function(t){s.$set(s.formInline,"user",t)},expression:"formInline.user"}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-select",{attrs:{placeholder:"活动区域"},model:{value:s.formInline.region,callback:function(t){s.$set(s.formInline,"region",t)},expression:"formInline.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("查询")])],1)],1)],1),a("p",[s._v("设置 "),a("code",[s._v("inline")]),s._v(" 属性可以让表单域变为行内的表单域")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"审批人"')]),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('"审批人"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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('"活动区域"')]),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('"区域一"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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('"区域二"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),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-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("查询"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-form")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("根据具体目标和制约因素，选择最佳的标签对齐方式。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="labelPosition" size="small">\n <el-radio-button label="left">左对齐</el-radio-button>\n <el-radio-button label="right">右对齐</el-radio-button>\n <el-radio-button label="top">顶部对齐</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">\n <el-form-item label="名称">\n <el-input v-model="formLabelAlign.name"></el-input>\n </el-form-item>\n <el-form-item label="活动区域">\n <el-input v-model="formLabelAlign.region"></el-input>\n </el-form-item>\n <el-form-item label="活动形式">\n <el-input v-model="formLabelAlign.type"></el-input>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n labelPosition: 'right',\n formLabelAlign: {\n name: '',\n region: '',\n type: ''\n }\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.labelPosition,callback:function(t){s.labelPosition=t},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("左对齐")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("右对齐")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("顶部对齐")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"80px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"名称"}},[a("el-input",{model:{value:s.formLabelAlign.name,callback:function(t){s.$set(s.formLabelAlign,"name",t)},expression:"formLabelAlign.name"}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-input",{model:{value:s.formLabelAlign.region,callback:function(t){s.$set(s.formLabelAlign,"region",t)},expression:"formLabelAlign.region"}})],1),a("el-form-item",{attrs:{label:"活动形式"}},[a("el-input",{model:{value:s.formLabelAlign.type,callback:function(t){s.$set(s.formLabelAlign,"type",t)},expression:"formLabelAlign.type"}})],1)],1)],1),a("p",[s._v("通过设置 "),a("code",[s._v("label-position")]),s._v(" 属性可以改变表单域标签的位置，可选值为 "),a("code",[s._v("top")]),s._v("、"),a("code",[s._v("left")]),s._v("，当设为 "),a("code",[s._v("top")]),s._v(" 时标签会置于表单域的顶部")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("左对齐"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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("右对齐"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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("顶部对齐"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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(">")]),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("</"),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-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('"80px"')]),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('"名称"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-form")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">\n <el-form-item label="活动名称" prop="name">\n <el-input v-model="ruleForm.name"></el-input>\n </el-form-item>\n <el-form-item label="活动区域" prop="region">\n <el-select v-model="ruleForm.region" placeholder="请选择活动区域">\n <el-option label="区域一" value="shanghai"></el-option>\n <el-option label="区域二" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="活动时间" required>\n <el-col :span="11">\n <el-form-item prop="date1">\n <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n </el-form-item>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-form-item prop="date2">\n <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n </el-form-item>\n </el-col>\n </el-form-item>\n <el-form-item label="即时配送" prop="delivery">\n <el-switch v-model="ruleForm.delivery"></el-switch>\n </el-form-item>\n <el-form-item label="活动性质" prop="type">\n <el-checkbox-group v-model="ruleForm.type">\n <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n <el-checkbox label="地推活动" name="type"></el-checkbox>\n <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="特殊资源" prop="resource">\n <el-radio-group v-model="ruleForm.resource">\n <el-radio label="线上品牌商赞助"></el-radio>\n <el-radio label="线下场地免费"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label="活动形式" prop="desc">\n <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'ruleForm\')">立即创建</el-button>\n <el-button @click="resetForm(\'ruleForm\')">重置</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n ruleForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n rules: {\n name: [\n { required: true, message: '请输入活动名称', trigger: 'blur' },\n { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }\n ],\n region: [\n { required: true, message: '请选择活动区域', trigger: 'change' }\n ],\n date1: [\n { type: 'date', required: true, message: '请选择日期', trigger: 'change' }\n ],\n date2: [\n { type: 'date', required: true, message: '请选择时间', trigger: 'change' }\n ],\n type: [\n { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }\n ],\n resource: [\n { required: true, message: '请选择活动资源', trigger: 'change' }\n ],\n desc: [\n { required: true, message: '请填写活动形式', trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"活动名称",prop:"name"}},[a("el-input",{model:{value:s.ruleForm.name,callback:function(t){s.$set(s.ruleForm,"name",t)},expression:"ruleForm.name"}})],1),a("el-form-item",{attrs:{label:"活动区域",prop:"region"}},[a("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:s.ruleForm.region,callback:function(t){s.$set(s.ruleForm,"region",t)},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"活动时间",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:s.ruleForm.date1,callback:function(t){s.$set(s.ruleForm,"date1",t)},expression:"ruleForm.date1"}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"选择时间"},model:{value:s.ruleForm.date2,callback:function(t){s.$set(s.ruleForm,"date2",t)},expression:"ruleForm.date2"}})],1)],1)],1),a("el-form-item",{attrs:{label:"即时配送",prop:"delivery"}},[a("el-switch",{model:{value:s.ruleForm.delivery,callback:function(t){s.$set(s.ruleForm,"delivery",t)},expression:"ruleForm.delivery"}})],1),a("el-form-item",{attrs:{label:"活动性质",prop:"type"}},[a("el-checkbox-group",{model:{value:s.ruleForm.type,callback:function(t){s.$set(s.ruleForm,"type",t)},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),a("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),a("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),a("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"特殊资源",prop:"resource"}},[a("el-radio-group",{model:{value:s.ruleForm.resource,callback:function(t){s.$set(s.ruleForm,"resource",t)},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"线上品牌商赞助"}}),a("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),a("el-form-item",{attrs:{label:"活动形式",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.ruleForm.desc,callback:function(t){s.$set(s.ruleForm,"desc",t)},expression:"ruleForm.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm")}}},[s._v("立即创建")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("Form 组件提供了表单验证的功能，只需要通过 "),a("code",[s._v("rules")]),s._v(" 属性传入约定的验证规则，并 Form-Item 的 "),a("code",[s._v("prop")]),s._v(" 属性设置为需校验的字段名即可。校验规则参见 "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")])]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"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(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"活动名称"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"活动区域"')]),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('"请选择活动区域"')]),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('"区域一"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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('"区域二"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"活动时间"')]),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('"选择日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),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-col")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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('"选择时间"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),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-col")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"即时配送"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"活动性质"')]),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('"美食/餐厅线上活动"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"地推活动"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"线下主题活动"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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('"单纯品牌曝光"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),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(">")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"特殊资源"')]),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('"线上品牌商赞助"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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('"线下场地免费"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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(">")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"活动形式"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-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("立即创建"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("重置"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-form")]),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("'请输入活动名称'")]),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("'长度在 3 到 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("'请选择活动区域'")]),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("'请选择日期'")]),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("'请选择时间'")]),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("'请至少选择一个活动性质'")]),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("'请选择活动资源'")]),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("'请填写活动形式'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">\n <el-form-item label="密码" prop="pass">\n <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="确认密码" prop="checkPass">\n <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="年龄" prop="age">\n <el-input v-model.number="ruleForm2.age"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'ruleForm2\')">提交</el-button>\n <el-button @click="resetForm(\'ruleForm2\')">重置</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n var checkAge = (rule, value, callback) => {\n if (!value) {\n return callback(new Error('年龄不能为空'));\n }\n setTimeout(() => {\n if (!Number.isInteger(value)) {\n callback(new Error('请输入数字值'));\n } else {\n if (value < 18) {\n callback(new Error('必须年满18岁'));\n } else {\n callback();\n }\n }\n }, 1000);\n };\n var validatePass = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('请输入密码'));\n } else {\n if (this.ruleForm2.checkPass !== '') {\n this.$refs.ruleForm2.validateField('checkPass');\n }\n callback();\n }\n };\n var validatePass2 = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('请再次输入密码'));\n } else if (value !== this.ruleForm2.pass) {\n callback(new Error('两次输入密码不一致!'));\n } else {\n callback();\n }\n };\n return {\n ruleForm2: {\n pass: '',\n checkPass: '',\n age: ''\n },\n rules2: {\n pass: [\n { validator: validatePass, trigger: 'blur' }\n ],\n checkPass: [\n { validator: validatePass2, trigger: 'blur' }\n ],\n age: [\n { validator: checkAge, trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,"status-icon":"",rules:s.rules2,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"密码",prop:"pass"}},[a("el-input",{attrs:{type:"password","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:"确认密码",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:"年龄",prop:"age"}},[a("el-input",{model:{value:s.ruleForm2.age,callback:function(t){s.$set(s.ruleForm2,"age",s._n(t))},expression:"ruleForm2.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("提交")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("本例还使用"),a("code",[s._v("status-icon")]),s._v("属性为输入框添加了表示校验结果的反馈图标。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"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(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"密码"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"确认密码"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"年龄"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-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("提交"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("重置"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-form")]),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("'年龄不能为空'")]),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("'请输入数字值'")]),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("'必须年满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("'请输入密码'")]),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("'请再次输入密码'")]),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("'两次输入密码不一致!'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">\n <el-form-item prop="email" label="邮箱" :rules="[\n { required: true, message: \'请输入邮箱地址\', trigger: \'blur\' },\n { type: \'email\', message: \'请输入正确的邮箱地址\', trigger: \'blur,change\' }\n ]">\n <el-input v-model="dynamicValidateForm.email"></el-input>\n </el-form-item>\n <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="\'域名\' + index" :key="domain.key" :prop="\'domains.\' + index + \'.value\'" :rules="{\n required: true, message: \'域名不能为空\', trigger: \'blur\'\n }">\n <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">提交</el-button>\n <el-button @click="addDomain">新增域名</el-button>\n <el-button @click="resetForm(\'dynamicValidateForm\')">重置</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n dynamicValidateForm: {\n domains: [{\n value: ''\n }],\n email: ''\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n },\n removeDomain(item) {\n var index = this.dynamicValidateForm.domains.indexOf(item)\n if (index !== -1) {\n this.dynamicValidateForm.domains.splice(index, 1)\n }\n },\n addDomain() {\n this.dynamicValidateForm.domains.push({\n value: '',\n key: Date.now()\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{prop:"email",label:"邮箱",rules:[{required:!0,message:"请输入邮箱地址",trigger:"blur"},{type:"email",message:"请输入正确的邮箱地址",trigger:"blur,change"}]}},[a("el-input",{model:{value:s.dynamicValidateForm.email,callback:function(t){s.$set(s.dynamicValidateForm,"email",t)},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(t,l){return a("el-form-item",{key:t.key,attrs:{label:"域名"+l,prop:"domains."+l+".value",rules:{required:!0,message:"域名不能为空",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(a){s.$set(t,"value",a)},expression:"domain.value"}}),a("el-button",{on:{click:function(a){a.preventDefault(),s.removeDomain(t)}}},[s._v("删除")])],1)}),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("dynamicValidateForm")}}},[s._v("提交")]),a("el-button",{on:{click:s.addDomain}},[s._v("新增域名")]),a("el-button",{on:{click:function(t){s.resetForm("dynamicValidateForm")}}},[s._v("重置")])],1)],2)],1),a("p",[s._v("除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"100px"')]),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('"邮箱"')]),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: '请输入邮箱地址', trigger: 'blur' },\n { type: 'email', message: '请输入正确的邮箱地址', 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-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("\"'域名' + 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: '域名不能为空', 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-name"}},[s._v("el-input")]),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("删除"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-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("提交"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("新增域名"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("重置"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-form")]),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("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("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\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 });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n <el-form-item label="年龄" prop="age" :rules="[\n { required: true, message: \'年龄不能为空\'},\n { type: \'number\', message: \'年龄必须为数字值\'}\n ]">\n <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'numberValidateForm\')">提交</el-button>\n <el-button @click="resetForm(\'numberValidateForm\')">重置</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n numberValidateForm: {\n age: ''\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"年龄",prop:"age",rules:[{required:!0,message:"年龄不能为空"},{type:"number",message:"年龄必须为数字值"}]}},[a("el-input",{attrs:{type:"age","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("提交")]),a("el-button",{on:{click:function(t){s.resetForm("numberValidateForm")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("数字类型的验证需要在 "),a("code",[s._v("v-model")]),s._v(" 处加上 "),a("code",[s._v(".number")]),s._v(" 的修饰符，这是 "),a("code",[s._v("Vue")]),s._v(" 自身提供的用于将绑定值转化为 "),a("code",[s._v("number")]),s._v(" 类型的修饰符。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"年龄"')]),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: '年龄不能为空'},\n { type: 'number', message: '年龄必须为数字值'}\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-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("提交"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("重置"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-form")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">\n <el-form-item label="活动名称">\n <el-input v-model="sizeForm.name"></el-input>\n </el-form-item>\n <el-form-item label="活动区域">\n <el-select v-model="sizeForm.region" placeholder="请选择活动区域">\n <el-option label="区域一" value="shanghai"></el-option>\n <el-option label="区域二" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="活动时间">\n <el-col :span="11">\n <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-time-picker type="fixed-time" placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n </el-col>\n </el-form-item>\n <el-form-item label="活动性质">\n <el-checkbox-group v-model="sizeForm.type">\n <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>\n <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>\n <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="特殊资源">\n <el-radio-group v-model="sizeForm.resource" size="medium">\n <el-radio border label="线上品牌商赞助"></el-radio>\n <el-radio border label="线下场地免费"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item size="large">\n <el-button type="primary" @click="onSubmit">立即创建</el-button>\n <el-button>取消</el-button>\n </el-form-item>\n</el-form>\n\n\n',script:"\n export default {\n data() {\n return {\n sizeForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n }\n };\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.sizeForm,"label-width":"80px",size:"mini"}},[a("el-form-item",{attrs:{label:"活动名称"}},[a("el-input",{model:{value:s.sizeForm.name,callback:function(t){s.$set(s.sizeForm,"name",t)},expression:"sizeForm.name"}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:s.sizeForm.region,callback:function(t){s.$set(s.sizeForm,"region",t)},expression:"sizeForm.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"活动时间"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:s.sizeForm.date1,callback:function(t){s.$set(s.sizeForm,"date1",t)},expression:"sizeForm.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"选择时间"},model:{value:s.sizeForm.date2,callback:function(t){s.$set(s.sizeForm,"date2",t)},expression:"sizeForm.date2"}})],1)],1),a("el-form-item",{attrs:{label:"活动性质"}},[a("el-checkbox-group",{model:{value:s.sizeForm.type,callback:function(t){s.$set(s.sizeForm,"type",t)},expression:"sizeForm.type"}},[a("el-checkbox-button",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),a("el-checkbox-button",{attrs:{label:"地推活动",name:"type"}}),a("el-checkbox-button",{attrs:{label:"线下主题活动",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"特殊资源"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:s.sizeForm.resource,callback:function(t){s.$set(s.sizeForm,"resource",t)},expression:"sizeForm.resource"}},[a("el-radio",{attrs:{border:"",label:"线上品牌商赞助"}}),a("el-radio",{attrs:{border:"",label:"线下场地免费"}})],1)],1),a("el-form-item",{attrs:{size:"large"}},[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("立即创建")]),a("el-button",[s._v("取消")])],1)],1)],1),a("p",[s._v("如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的"),a("code",[s._v("size")]),s._v("属性，直接为这个表单项或表单组件设置自己的"),a("code",[s._v("size")]),s._v("即可。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"80px"')]),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('"活动名称"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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('"请选择活动区域"')]),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('"区域一"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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('"区域二"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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('"选择日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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('"选择时间"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),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(">")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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('"美食/餐厅线上活动"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),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('"地推活动"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),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('"线下主题活动"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),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(">")]),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-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),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-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('"线上品牌商赞助"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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('"线下场地免费"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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(">")]),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-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("立即创建"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("取消"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-form")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form 表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dian-xing-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 典型表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("W3C 标准中有如下"),a("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[s._v("规定")]),s._v("：")]),a("blockquote",[a("p",[a("i",[s._v("When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.")])])]),a("p",[s._v("即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 "),a("code",{pre:!0},[s._v("<el-form>")]),s._v(" 标签上添加 "),a("code",{pre:!0},[s._v("@submit.native.prevent")]),s._v("。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xing-nei-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 行内表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dui-qi-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 对齐方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"biao-dan-yan-zheng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 表单验证")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-xiao-yan-gui-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xiao-yan-gui-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义校验规则")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-zeng-jian-biao-dan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-dan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态增减表单项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-zi-lei-xing-yan-zheng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-zi-lei-xing-yan-zheng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 数字类型验证")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("嵌套在 "),a("code",{pre:!0},[s._v("el-form-item")]),s._v(" 中的 "),a("code",{pre:!0},[s._v("el-form-item")]),s._v(" 标签宽度默认为零，不会继承 "),a("code",{pre:!0},[s._v("el-form")]),s._v(" 的 "),a("code",{pre:!0},[s._v("label-width")]),s._v("。如果需要可以为其单独设置 "),a("code",{pre:!0},[s._v("label-width")]),s._v(" 属性。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"biao-dan-nei-zu-jian-chi-cun-kong-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-nei-zu-jian-chi-cun-kong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 表单内组件尺寸控制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过设置 Form 上的 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("表单数据对象")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("表单验证规则")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("行内表单模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("表单域标签的位置")]),a("td",[s._v("string")]),a("td",[s._v("right/left/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("表单域标签的后缀")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("是否显示校验错误信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("inline-message")]),a("td",[s._v("是否以行内形式展示校验信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status-icon")]),a("td",[s._v("是否在输入框中显示校验结果反馈图标")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("用于控制该表单内组件的尺寸")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("对整个表单进行校验的方法。若不传入回调函数，则会返回一个 promise")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("对部分表单字段进行校验的方法")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("对整个表单进行重置，将所有字段值重置为初始值并移除校验结果")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("clearValidate")]),a("td",[s._v("移除整个表单的校验结果")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的")]),a("td",[s._v("string")]),a("td",[s._v("传入 Form 组件的 "),a("code",{pre:!0},[s._v("model")]),s._v(" 中的字段")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("标签文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("表单域标签的的宽度，例如 '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("是否必填，如不设置，则会根据校验规则自动生成")]),a("td",[s._v("bolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("表单验证规则")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("表单域验证错误信息, 设置该值会使表单验证状态变为"),a("code",{pre:!0},[s._v("error")]),s._v("，并显示该错误信息")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("是否显示校验错误信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("inline-message")]),a("td",[s._v("以行内形式展示校验信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("用于控制该表单域下组件的尺寸")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("-")])])])])},function(){var s=this,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("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("Form Item 的内容")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("标签文本的内容")])])])])},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("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("resetField")]),a("td",[s._v("对该表单项进行重置，将其值重置为初始值并移除校验结果")]),a("td",[s._v("-")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(834)},function(s,t,a){"use strict";function l(s){a(835)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(837),e=a(0),r=l,v=e(null,n.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var l=a(836);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("cd1a6b10",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,"ul.language-list{color:#5e6d82;font-size:14px;padding-left:20px}ul.language-list li{line-height:1.8}",""])},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"guo-ji-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 国际化")]),a("p",[s._v("Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("// 完整引入 Element")]),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"),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("或")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("// 按需引入 Element")]),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"),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("// 设置语言")]),s._v("\nlocale.use(lang)\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 引入组件")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。")]),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",{pre:!0},[a("code",{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:"jian-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容 "),a("code",{pre:!0},[s._v("vue-i18n@5.x")])]),a("p",[s._v("Element 兼容 "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v("，搭配使用能更方便地实现多语言切换。")]),a("pre",{pre:!0},[a("code",{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:"jian-rong-qi-ta-i18n-cha-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-qi-ta-i18n-cha-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容其他 i18n 插件")]),a("p",[s._v("如果不使用 "),a("code",{pre:!0},[s._v("vue-i18n@5.x")]),s._v("，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。")]),a("pre",{pre:!0},[a("code",{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:"jian-rong-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容 "),a("code",{pre:!0},[s._v("vue-i18n@6.x")])]),a("p",[s._v("默认不支持 6.x 的 "),a("code",{pre:!0},[s._v("vue-i18n")]),s._v("，你需要手动处理。")]),a("pre",{pre:!0},[a("code",{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("// 或者用 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("// 或者用 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:"an-xu-jia-zai-li-ding-zhi-i18n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-jia-zai-li-ding-zhi-i18n","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按需加载里定制 i18n")]),a("pre",{pre:!0},[a("code",{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:"tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 通过 CDN 的方式加载语言文件")]),a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("搭配 "),a("code",{pre:!0},[s._v("vue-i18n")]),s._v(" 使用")]),a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("目前 Element 内置了以下语言：")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("简体中文（zh-CN）")]),a("li",[s._v("英语（en）")]),a("li",[s._v("德语（de）")]),a("li",[s._v("葡萄牙语（pt）")]),a("li",[s._v("西班牙语（es）")]),a("li",[s._v("丹麦语（da）")]),a("li",[s._v("法语（fr）")]),a("li",[s._v("挪威语（nb-NO）")]),a("li",[s._v("繁体中文（zh-TW）")]),a("li",[s._v("意大利语（it）")]),a("li",[s._v("韩语（ko）")]),a("li",[s._v("日语（ja）")]),a("li",[s._v("荷兰语（nl）")]),a("li",[s._v("越南语（vi）")]),a("li",[s._v("俄语（ru-RU）")]),a("li",[s._v("土耳其语（tr-TR）")]),a("li",[s._v("巴西葡萄牙语（pt-br）")]),a("li",[s._v("波斯语（fa）")]),a("li",[s._v("泰语（th）")]),a("li",[s._v("印尼语（id）")]),a("li",[s._v("保加利亚语（bg）")]),a("li",[s._v("波兰语（pl）")]),a("li",[s._v("芬兰语（fi）")]),a("li",[s._v("瑞典语（sv-SE）")]),a("li",[s._v("希腊语（el）")]),a("li",[s._v("斯洛伐克语（sk）")]),a("li",[s._v("加泰罗尼亚语（ca）")]),a("li",[s._v("捷克语（cs-CZ）")]),a("li",[s._v("乌克兰语（ua）")]),a("li",[s._v("土库曼语（tk）")]),a("li",[s._v("泰米尔语（ta）")]),a("li",[s._v("拉脱维亚语（lv）")]),a("li",[s._v("南非荷兰语（af-ZA）")]),a("li",[s._v("爱沙尼亚语（ee）")]),a("li",[s._v("斯洛文尼亚语（sl）")]),a("li",[s._v("阿拉伯语（ar）")]),a("li",[s._v("希伯来语（he）")]),a("li",[s._v("立陶宛语（lt）")]),a("li",[s._v("蒙古语（mn）")]),a("li",[s._v("哈萨克斯坦语（kz）")]),a("li",[s._v("匈牙利语（hu）")]),a("li",[s._v("罗马尼亚语（ro）")])]),a("p",[s._v("如果你需要使用其他的语言，欢迎贡献 PR：只需在 "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[s._v("这里")]),s._v(" 添加一个语言配置文件即可。")])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(839)},function(s,t,a){"use strict";function l(s){a(840)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(842),e=a.n(n),r=a(843),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(841);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("1a82e157",l,!0)},function(s,t,a){t=s.exports=a(109)(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(621);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("提供了一套常用的图标集合。")]),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">搜索</el-button>\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("i",{staticClass:"el-icon-edit"}),a("i",{staticClass:"el-icon-share"}),a("i",{staticClass:"el-icon-delete"}),a("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[s._v("搜索")])],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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("搜索"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",{key:t},[a("span",[a("i",{class:"el-icon-"+t}),a("span",{staticClass:"icon-name"},[s._v(s._s("el-icon-"+t))])])])}))],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon-tu-biao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-tu-biao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon 图标")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shi-yong-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("直接通过设置类名为 "),a("code",{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:"tu-biao-ji-he"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-ji-he","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图标集合")])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(845)},function(s,t,a){"use strict";function l(s){a(846)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(848),e=a.n(n),r=a(849),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(847);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("1a31dec0",l,!0)},function(s,t,a){t=s.exports=a(109)(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("仅允许输入标准的数字值，可定义范围")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n num1: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{min:1,max:10,label:"描述文字"},on:{change:s.handleChange},model:{value:s.num1,callback:function(t){s.num1=t},expression:"num1"}})]],2),a("p",[s._v("要使用它，只需要在"),a("code",[s._v("el-input-number")]),s._v("元素中使用"),a("code",[s._v("v-model")]),s._v("绑定变量即可，变量的初始值即为默认值。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"描述文字"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(t){s.num2=t},expression:"num2"}})]],2),a("p",[a("code",[s._v("disabled")]),s._v("属性接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置"),a("code",[s._v("min")]),s._v("属性和"),a("code",[s._v("max")]),s._v("属性，不设置"),a("code",[s._v("min")]),s._v("和"),a("code",[s._v("max")]),s._v("时，最小值为 0。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("允许定义递增递减的步数控制")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n num3: 5\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(t){s.num3=t},expression:"num3"}})]],2),a("p",[s._v("设置"),a("code",[s._v("step")]),s._v("属性可以控制步长，接受一个"),a("code",[s._v("Number")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num4"></el-input-number>\n <el-input-number size="medium" v-model="num5"></el-input-number>\n <el-input-number size="small" v-model="num6"></el-input-number>\n <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n num4: 1,\n num5: 1,\n num6: 1,\n 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n num8: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:s.handleChange},model:{value:s.num8,callback:function(t){s.num8=t},expression:"num8"}})]],2),a("p",[s._v("设置 "),a("code",[s._v("controls-position")]),s._v(" 属性可以控制按钮位置。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber 计数器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-shu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 步数")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("额外提供了 "),a("code",{pre:!0},[s._v("medium")]),s._v("、"),a("code",{pre:!0},[s._v("small")]),s._v("、"),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:"an-niu-wei-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-wei-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮位置")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("设置计数器允许的最小值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("设置计数器允许的最大值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("Infinity")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("计数器步长")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("计数器尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用计数器")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("是否使用控制按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("输入时的去抖延迟，毫秒")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("controls-position")]),a("td",[s._v("控制按钮位置")]),a("td",[s._v("string")]),a("td",[s._v("right")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("输入框关联的label文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("绑定值被改变时触发")]),a("td",[s._v("最后变更的值")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("在组件 Input 失去焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("在组件 Input 获得焦点时触发")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("使 input 获取焦点")]),a("td",[s._v("-")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(851)},function(s,t,a){"use strict";function l(s){a(852)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(854),e=a.n(n),r=a(855),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(853);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("07351d1f",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,".demo-input.demo-zh-CN .el-select .el-input{width:130px}.demo-input.demo-zh-CN .el-input{width:180px}.demo-input.demo-zh-CN .el-textarea{width:414px}.demo-input.demo-zh-CN .el-input-group{width:100%}.demo-input.demo-zh-CN .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-zh-CN .input-with-select .el-input-group__prepend{background-color:#fff}.demo-input.demo-zh-CN .demo-autocomplete{text-align:center}.demo-input.demo-zh-CN .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-zh-CN .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-zh-CN .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}.demo-input-suffix{margin-bottom:15px}.demo-input-suffix .el-input{margin-right:15px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{restaurants:[],input:"",input1:"",input2:"",input21:"",input22:"",input23:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",input10:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE 鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},querySearch:function(s,t){var a=this.restaurants;t(s?a.filter(this.createStateFilter(s)):a)},querySearchAsync:function(s,t){var a=this.restaurants,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.restaurants=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("通过鼠标或键盘输入字符")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input v-model="input" placeholder="请输入内容"></el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n input: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input,callback:function(t){s.input=t},expression:"input"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="请输入内容" v-model="input1" :disabled="true">\n</el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n input1: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"请输入内容",disabled:!0},model:{value:s.input1,callback:function(t){s.input1=t},expression:"input1"}})],1),a("p",[s._v("通过 "),a("code",[s._v("disabled")]),s._v(" 属性指定是否禁用 input 组件")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请输入内容"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="请输入内容" v-model="input10" clearable>\n</el-input>\n\n\n',script:"\n export default {\n data() {\n return {\n input10: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"请输入内容",clearable:""},model:{value:s.input10,callback:function(t){s.input10=t},expression:"input10"}})],1),a("p",[s._v("使用"),a("code",[s._v("clearable")]),s._v("属性即可得到一个可清空的输入框")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请输入内容"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("带有图标标记输入类型")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="demo-input-suffix">\n 属性方式：\n <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input2">\n </el-input>\n <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input21">\n </el-input>\n</div>\n<div class="demo-input-suffix">\n slot 方式：\n <el-input placeholder="请选择日期" v-model="input22">\n <i slot="suffix" class="el-input__icon el-icon-date"></i>\n </el-input>\n <el-input placeholder="请输入内容" v-model="input23">\n <i slot="prefix" class="el-input__icon el-icon-search"></i>\n </el-input>\n</div>\n\n\n',script:"\nexport default {\n data() {\n return {\n input2: '',\n input21: '',\n input22: '',\n input23: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"demo-input-suffix"},[s._v("\n 属性方式：\n "),a("el-input",{attrs:{placeholder:"请选择日期","suffix-icon":"el-icon-date"},model:{value:s.input2,callback:function(t){s.input2=t},expression:"input2"}}),a("el-input",{attrs:{placeholder:"请输入内容","prefix-icon":"el-icon-search"},model:{value:s.input21,callback:function(t){s.input21=t},expression:"input21"}})],1),a("div",{staticClass:"demo-input-suffix"},[s._v("\n slot 方式：\n "),a("el-input",{attrs:{placeholder:"请选择日期"},model:{value:s.input22,callback:function(t){s.input22=t},expression:"input22"}},[a("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input23,callback:function(t){s.input23=t},expression:"input23"}},[a("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)]),a("p",[s._v("可以通过 "),a("code",[s._v("prefix-icon")]),s._v(" 和 "),a("code",[s._v("suffix-icon")]),s._v(" 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 属性方式：\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('"请选择日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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('"请输入内容"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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("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 slot 方式：\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('"请选择日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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(">")]),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('"请输入内容"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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(">")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">\n</el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"请输入内容"},model:{value:s.textarea,callback:function(t){s.textarea=t},expression:"textarea"}})],1),a("p",[s._v("文本域高度可通过 "),a("code",[s._v("rows")]),s._v(" 属性控制")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请输入内容"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea3">\n</el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea2: '',\n textarea3: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"请输入内容"},model:{value:s.textarea2,callback:function(t){s.textarea2=t},expression:"textarea2"}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"请输入内容"},model:{value:s.textarea3,callback:function(t){s.textarea3=t},expression:"textarea3"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请输入内容"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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("</"),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("\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('"请输入内容"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("可前置或后置元素，一般为标签或按钮")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n <el-input placeholder="请输入内容" v-model="input3">\n <template slot="prepend">Http://</template>\n </el-input>\n</div>\n<div style="margin-top: 15px;">\n <el-input placeholder="请输入内容" v-model="input4">\n <template slot="append">.com</template>\n </el-input>\n</div>\n<div style="margin-top: 15px;">\n <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">\n <el-select v-model="select" slot="prepend" placeholder="请选择">\n <el-option label="餐厅名" value="1"></el-option>\n <el-option label="订单号" value="2"></el-option>\n <el-option label="用户电话" value="3"></el-option>\n </el-select>\n <el-button slot="append" icon="el-icon-search"></el-button>\n </el-input>\n</div>\n\n\n',script:"\nexport default {\n data() {\n return {\n input3: '',\n input4: '',\n input5: '',\n select: ''\n }\n }\n}\n",style:"\n .el-select .el-input {\n width: 130px;\n }\n .input-with-select .el-input-group__prepend {\n background-color: #fff;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input3,callback:function(t){s.input3=t},expression:"input3"}},[a("template",{attrs:{slot:"prepend"},slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input4,callback:function(t){s.input4=t},expression:"input4"}},[a("template",{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:"请输入内容"},model:{value:s.input5,callback:function(t){s.input5=t},expression:"input5"}},[a("el-select",{attrs:{slot:"prepend",placeholder:"请选择"},slot:"prepend",model:{value:s.select,callback:function(t){s.select=t},expression:"select"}},[a("el-option",{attrs:{label:"餐厅名",value:"1"}}),a("el-option",{attrs:{label:"订单号",value:"2"}}),a("el-option",{attrs:{label:"用户电话",value:"3"}})],1),a("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)]),a("p",[s._v("可通过 slot 来指定在 input 中前置或者后置内容。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请输入内容"')]),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("</"),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")]),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("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('"请输入内容"')]),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("</"),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")]),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("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('"请输入内容"')]),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('"请选择"')]),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('"餐厅名"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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('"订单号"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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('"用户电话"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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("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("130px")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="demo-input-size">\n <el-input placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input6">\n </el-input>\n <el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input7">\n </el-input>\n <el-input size="small" placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input8">\n </el-input>\n <el-input size="mini" placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input9">\n </el-input>\n</div>\n\n\n',script:"\nexport default {\n data() {\n return {\n input6: '',\n input7: '',\n input8: '',\n input9: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:s.input6,callback:function(t){s.input6=t},expression:"input6"}}),a("el-input",{attrs:{size:"medium",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:s.input7,callback:function(t){s.input7=t},expression:"input7"}}),a("el-input",{attrs:{size:"small",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:s.input8,callback:function(t){s.input8=t},expression:"input8"}}),a("el-input",{attrs:{size:"mini",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:s.input9,callback:function(t){s.input9=t},expression:"input9"}})],1)]),a("p",[s._v("可通过 "),a("code",[s._v("size")]),s._v(" 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请输入内容"')]),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('"input6"')]),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(">")]),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('"请输入内容"')]),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('"input7"')]),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(">")]),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('"请输入内容"')]),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('"input8"')]),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(">")]),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('"请输入内容"')]),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('"input9"')]),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(">")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("根据输入内容提供对应的输入建议")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="demo-autocomplete">\n <el-col :span="12">\n <div class="sub-title">激活即列出输入建议</div>\n <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>\n </el-col>\n <el-col :span="12">\n <div class="sub-title">输入后匹配输入建议</div>\n <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>\n </el-col>\n</el-row>\n\n',script:'\n export default {\n data() {\n return {\n restaurants: [],\n state1: \'\',\n state2: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var restaurants = this.restaurants;\n var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n // 调用 callback 返回建议列表的数据\n cb(results);\n },\n createFilter(queryString) {\n return (restaurant) => {\n return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n { "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n { "value": "钱记", "address": "上海市长宁区天山西路" },\n { "value": "壹杯加", "address": "上海市长宁区通协路" },\n { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n { "value": "浏阳蒸菜", "address": "天山西路430号" },\n { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.restaurants = this.loadAll();\n }\n }\n',style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("激活即列出输入建议")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"请输入内容"},on:{select:s.handleSelect},model:{value:s.state1,callback:function(t){s.state1=t},expression:"state1"}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("输入后匹配输入建议")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"请输入内容","trigger-on-focus":!1},on:{select:s.handleSelect},model:{value:s.state2,callback:function(t){s.state2=t},expression:"state2"}})],1)],1)],1),a("p",[s._v("autocomplete 是一个可带输入建议的输入框组件，"),a("code",[s._v("fetch-suggestions")]),s._v(" 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("激活即列出输入建议"),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-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('"请输入内容"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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(">")]),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("输入后匹配输入建议"),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-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('"请输入内容"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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(">")]),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("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("restaurants")]),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(" restaurants = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".restaurants;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : restaurants;\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 调用 callback 返回建议列表的数据")]),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("restaurant")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (restaurant.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('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路438号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"贡茶"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"十二泷町"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"NONO JUICE 鲜榨果汁"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"枪会山"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"纵食"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"钱记"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"壹杯加"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区通协路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"港式小铺"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"剑河路443-1"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"动力鸡车"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路430号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路428号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路389号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),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(".restaurants = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("可自定义输入建议的显示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete popper-class="my-autocomplete" v-model="state3" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">\n <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick">\n </i>\n <template slot-scope="props">\n <div class="name">{{ props.item.value }}</div>\n <span class="addr">{{ props.item.address }}</span>\n </template>\n</el-autocomplete>\n\n\n\n\n',script:'\n export default {\n data() {\n return {\n restaurants: [],\n state3: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var restaurants = this.restaurants;\n var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n // 调用 callback 返回建议列表的数据\n cb(results);\n },\n createFilter(queryString) {\n return (restaurant) => {\n return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n { "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n { "value": "钱记", "address": "上海市长宁区天山西路" },\n { "value": "壹杯加", "address": "上海市长宁区通协路" },\n { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n { "value": "浏阳蒸菜", "address": "天山西路430号" },\n { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n },\n handleIconClick(ev) {\n console.log(ev);\n }\n },\n mounted() {\n this.restaurants = this.loadAll();\n }\n }\n',style:"\n.my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .name {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .addr {\n font-size: 12px;\n color: #b4b4b4;\n }\n\n .highlighted .addr {\n color: #ddd;\n }\n }\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,placeholder:"请输入内容"},on:{select:s.handleSelect},scopedSlots:s._u([{key:"default",fn:function(t){return[a("div",{staticClass:"name"},[s._v(s._s(t.item.value))]),a("span",{staticClass:"addr"},[s._v(s._s(t.item.address))])]}}]),model:{value:s.state3,callback:function(t){s.state3=t},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:s.handleIconClick},slot:"suffix"})])],1),a("p",[s._v("使用"),a("code",[s._v("scoped slot")]),s._v("自定义输入建议的模板。该 scope 的参数为"),a("code",[s._v("item")]),s._v("，表示当前输入建议对象。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请输入内容"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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('"name"')]),s._v(">")]),s._v("{{ props.item.value }}"),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("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"addr"')]),s._v(">")]),s._v("{{ props.item.address }}"),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("template")]),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(">")]),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 .name {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .addr {\n font-size: 12px;\n color: #b4b4b4;\n }\n\n .highlighted .addr {\n color: #ddd;\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("restaurants")]),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(" restaurants = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".restaurants;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : restaurants;\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 调用 callback 返回建议列表的数据")]),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("restaurant")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (restaurant.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('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路438号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"贡茶"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"十二泷町"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"NONO JUICE 鲜榨果汁"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"枪会山"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"纵食"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"钱记"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"壹杯加"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区通协路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"港式小铺"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"剑河路443-1"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"动力鸡车"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路430号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路428号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路389号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),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(".restaurants = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("从服务端搜索数据")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>\n\n',script:'\n export default {\n data() {\n return {\n restaurants: [],\n state4: \'\',\n timeout: null\n };\n },\n methods: {\n loadAll() {\n return [\n { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n { "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n { "value": "钱记", "address": "上海市长宁区天山西路" },\n { "value": "壹杯加", "address": "上海市长宁区通协路" },\n { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n { "value": "浏阳蒸菜", "address": "天山西路430号" },\n { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n ];\n },\n querySearchAsync(queryString, cb) {\n var restaurants = this.restaurants;\n var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n cb(results);\n }, 3000 * Math.random());\n },\n createStateFilter(queryString) {\n return (state) => {\n return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.restaurants = this.loadAll();\n }\n };\n',style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"请输入内容"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(t){s.state4=t},expression:"state4"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请输入内容"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),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("restaurants")]),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('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路438号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"贡茶"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"十二泷町"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"NONO JUICE 鲜榨果汁"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"枪会山"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"纵食"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"钱记"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"壹杯加"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区通协路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"港式小铺"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"剑河路443-1"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"动力鸡车"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路430号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路428号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"天山西路389号"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n ];\n },\n querySearchAsync(queryString, cb) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" restaurants = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".restaurants;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createStateFilter(queryString)) : restaurants;\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 createStateFilter(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("state")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (state.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(".restaurants = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"input-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input 输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-qing-kong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可清空")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-icon-de-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-icon-de-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带 icon 的输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"wen-ben-yu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wen-ben-yu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 文本域")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("用于输入多行文本信息，通过将 "),a("code",{pre:!0},[s._v("type")]),s._v(" 属性的值指定为 textarea。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可自适应文本高度的文本域")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过设置 "),a("code",{pre:!0},[s._v("autosize")]),s._v(" 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 "),a("code",{pre:!0},[s._v("autosize")]),s._v(" 还可以设定为一个对象，指定最小行数和最大行数。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-he-xing-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-he-xing-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 复合型输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-shu-ru-jian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-shu-ru-jian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带输入建议")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 远程搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("类型")]),a("td",[s._v("string")]),a("td",[s._v("text / textarea")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("最大输入长度")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("最小输入长度")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否可清空")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸，只在 "),a("code",{pre:!0},[s._v('type!="textarea"')]),s._v(" 时有效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("输入框头部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("suffix-icon")]),a("td",[s._v("输入框尾部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("输入框行数，只对 "),a("code",{pre:!0},[s._v('type="textarea"')]),s._v(" 有效")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("自适应内容高度，只对 "),a("code",{pre:!0},[s._v('type="textarea"')]),s._v(" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean / object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("原生属性，自动补全")]),a("td",[s._v("string")]),a("td",[s._v("on, off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("原生属性，是否只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("原生属性，设置最大值")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("原生属性，设置最小值")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("原生属性，设置输入字段的合法数字间隔")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("控制是否能被用户缩放")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("原生属性，自动获取焦点")]),a("td",[s._v("boolean")]),a("td",[s._v("true, false")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("输入框关联的label文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("tabindex")]),a("td",[s._v("输入框的tabindex")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},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("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("prefix")]),a("td",[s._v("输入框头部内容，只对 "),a("code",{pre:!0},[s._v('type="text"')]),s._v(" 有效")])]),a("tr",[a("td",[s._v("suffix")]),a("td",[s._v("输入框尾部内容，只对 "),a("code",{pre:!0},[s._v('type="text"')]),s._v(" 有效")])]),a("tr",[a("td",[s._v("prepend")]),a("td",[s._v("输入框前置内容，只对 "),a("code",{pre:!0},[s._v('type="text"')]),s._v(" 有效")])]),a("tr",[a("td",[s._v("append")]),a("td",[s._v("输入框后置内容，只对 "),a("code",{pre:!0},[s._v('type="text"')]),s._v(" 有效")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("blur")]),a("td",[s._v("在 Input 失去焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("在 Input 获得焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("change")]),a("td",[s._v("在 Input 值改变时触发")]),a("td",[s._v("(value: string | number)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("使 input 获取焦点")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("valueKey")]),a("td",[s._v("输入建议对象中用于显示的键名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("必填值，输入绑定值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("获取输入建议的去抖延时")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("fetch-suggestions")]),a("td",[s._v("返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它")]),a("td",[s._v("Function(queryString, callback)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("Autocomplete 下拉列表的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("trigger-on-focus")]),a("td",[s._v("是否在输入框 focus 时显示建议列表")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("select-when-unmatched")]),a("td",[s._v("在输入没有任何匹配建议的情况下，按下回车是否触发 "),a("code",{pre:!0},[s._v("select")]),s._v(" 事件")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("输入框关联的label文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("输入框头部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("suffix-icon")]),a("td",[s._v("输入框尾部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},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("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("prefix")]),a("td",[s._v("输入框头部内容")])]),a("tr",[a("td",[s._v("suffix")]),a("td",[s._v("输入框尾部内容")])]),a("tr",[a("td",[s._v("prepend")]),a("td",[s._v("输入框前置内容")])]),a("tr",[a("td",[s._v("append")]),a("td",[s._v("输入框后置内容")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("点击选中建议项时触发")]),a("td",[s._v("选中建议项")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(857)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(858),n=a(0),e=n(null,l.a,!1,null,null,null);t.default=e.exports},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"an-zhuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 安装")]),a("h3",{attrs:{id:"npm-an-zhuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm-an-zhuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm 安装")]),a("p",[s._v("推荐使用 npm 的方式安装，它能更好地和 "),a("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(" 打包工具配合使用。")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),a("p",[s._v("目前可以通过 "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[s._v("unpkg.com/element-ui")]),s._v(" 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- 引入样式 --\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!-- 引入组件库 --\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("div",{staticClass:"tip"},[a("p",[s._v("我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 "),a("a",{attrs:{href:"https://unpkg.com"}},[s._v("unpkg.com")]),s._v("。")])]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),a("p",[s._v("通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。"),a("a",{attrs:{href:"https://jsfiddle.net/hzfpyvg6/14/"}},[s._v("在线演示")])]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-meta"}},[s._v("<!DOCTYPE html>")]),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!-- 引入样式 --\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("</"),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("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("按钮"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("欢迎使用 Element"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),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(">")]),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("body")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- 先引入 Vue --\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- 引入组件库 --\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("p",[s._v("如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。")])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(860)},function(s,t,a){"use strict";function l(s){a(861)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(863),e=a(0),r=l,v=e(null,n.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var l=a(862);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("5b645506",l,!0)},function(s,t,a){t=s.exports=a(109)(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("通过基础的 24 分栏，迅速简便地创建布局。")]),s._m(1),a("p",[s._v("使用单一分栏创建基础的栅格布局。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("通过 row 和 col 组件，并通过 col 组件的 "),a("code",[s._v("span")]),s._v(" 属性我们就可以自由地组合布局。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("分栏之间存在间隔。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="20">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row 组件 提供 "),a("code",[s._v("gutter")]),s._v(" 属性来指定每一栏之间的间隔，默认间隔为 0。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="20">\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("支持偏移指定的栏数。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="20">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("通过制定 col 组件的 "),a("code",[s._v("offset")]),s._v(" 属性可以指定分栏偏移的栏数。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row type="flex" class="row-bg">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("将 "),a("code",[s._v("type")]),s._v(" 属性赋值为 'flex'，可以启用 flex 布局，并可通过 "),a("code",[s._v("justify")]),s._v(" 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="10">\n <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n"}}},[a("div",{staticClass:"source",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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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-name"}},[s._v("div")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：")]),s._m(10),a("p",[s._v("包含的类名及其含义为：")]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout 布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-lan-jian-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分栏间隔")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hun-he-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 混合布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-lan-pian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分栏偏移")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dui-qi-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 对齐方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过 "),a("code",{pre:!0},[s._v("flex")]),s._v(" 布局来对分栏进行灵活的对齐。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 响应式布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸："),a("code",{pre:!0},[s._v("xs")]),s._v("、"),a("code",{pre:!0},[s._v("sm")]),s._v("、"),a("code",{pre:!0},[s._v("md")]),s._v("、"),a("code",{pre:!0},[s._v("lg")]),s._v(" 和 "),a("code",{pre:!0},[s._v("xl")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-yu-duan-dian-de-yin-cang-lei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-yu-duan-dian-de-yin-cang-lei","aria-hidden":"true"}},[s._v("¶")]),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-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(" - 当视口在 "),a("code",{pre:!0},[s._v("xs")]),s._v(" 尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-sm-only")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("sm")]),s._v(" 尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-sm-and-down")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("sm")]),s._v(" 及以下尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-sm-and-up")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("sm")]),s._v(" 及以上尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-md-only")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("md")]),s._v(" 尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-md-and-down")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("md")]),s._v(" 及以下尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-md-and-up")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("md")]),s._v(" 及以上尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-lg-only")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("lg")]),s._v(" 尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-lg-and-down")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("lg")]),s._v(" 及以下尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-lg-and-up")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("lg")]),s._v(" 及以上尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-xl-only")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("xl")]),s._v(" 尺寸时隐藏")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("栅格间隔")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("布局模式，可选 flex，现代浏览器下有效")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("flex 布局下的水平排列方式")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("flex 布局下的垂直排列方式")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("自定义元素标签")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("栅格占据的列数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("24")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("栅格左侧的间隔格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("栅格向右移动格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("栅格向左移动格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",{pre:!0},[s._v("<768px")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",{pre:!0},[s._v("≥768px")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",{pre:!0},[s._v("≥992px")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",{pre:!0},[s._v("≥1200px")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("xl")]),a("td",[a("code",{pre:!0},[s._v("≥1920px")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("自定义元素标签")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(865)},function(s,t,a){"use strict";function l(s){a(866)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(868),e=a.n(n),r=a(869),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(867);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("167dc707",l,!0)},function(s,t,a){t=s.exports=a(109)(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-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var s=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){s.close()},2e3)}}}},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("加载数据时显示动效。")]),s._m(1),a("p",[s._v("在表格等容器中加载数据时显示。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table v-loading="loading" :data="tableData" style="width: 100%">\n <el-table-column prop="date" label="日期" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="180">\n </el-table-column>\n <el-table-column prop="address" label="地址">\n </el-table-column>\n </el-table>\n</template>\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }],\n loading: true\n };\n }\n };\n",style:"\n body {\n margin: 0;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令"),a("code",[s._v("v-loading")]),s._v("，只需要绑定"),a("code",[s._v("Boolean")]),s._v("即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加"),a("code",[s._v("body")]),s._v("修饰符，可以使遮罩插入至 DOM 中的 body 上。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"日期"')]),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("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可自定义加载文案、图标和背景色。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table v-loading="loading2" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" style="width: 100%">\n <el-table-column prop="date" label="日期" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="180">\n </el-table-column>\n <el-table-column prop="address" label="地址">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }],\n loading2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"拼命加载中","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("在绑定了"),a("code",[s._v("v-loading")]),s._v("指令的元素上添加"),a("code",[s._v("element-loading-text")]),s._v("属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，"),a("code",[s._v("element-loading-spinner")]),s._v("和"),a("code",[s._v("element-loading-background")]),s._v("属性分别用来设定图标类名和背景色值。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"拼命加载中"')]),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('"日期"')]),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("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("页面数据加载时显示。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="primary" @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">\n 指令方式\n </el-button>\n <el-button type="primary" @click="openFullScreen2">\n 服务方式\n </el-button>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n fullscreenLoading: false\n }\n },\n methods: {\n openFullScreen() {\n this.fullscreenLoading = true;\n setTimeout(() => {\n this.fullscreenLoading = false;\n }, 2000);\n },\n openFullScreen2() {\n const loading = this.$loading({\n lock: true,\n text: 'Loading',\n spinner: 'el-icon-loading',\n background: 'rgba(0, 0, 0, 0.7)'\n });\n setTimeout(() => {\n loading.close();\n }, 2000);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:s.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:s.openFullScreen}},[s._v("\n 指令方式\n ")]),a("el-button",{attrs:{type:"primary"},on:{click:s.openFullScreen2}},[s._v("\n 服务方式\n ")])]],2),a("p",[s._v("当使用指令方式时，全屏遮罩需要添加"),a("code",[s._v("fullscreen")]),s._v("修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用"),a("code",[s._v("lock")]),s._v("修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 指令方式\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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 服务方式\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Loading 还可以以服务的方式调用。引入 Loading 服务：")]),s._m(5),a("p",[s._v("在需要调用时：")]),s._m(6),s._m(7),s._m(8),a("p",[s._v("需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading 加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qu-yu-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 区域加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zheng-ye-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 整页加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-wu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 服务")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{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("其中 "),a("code",{pre:!0},[s._v("options")]),s._v(" 参数为 Loading 的配置项，具体见下表。"),a("code",{pre:!0},[s._v("LoadingService")]),s._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),a("code",{pre:!0},[s._v("close")]),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("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 需要异步关闭")]),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("此时调用它们中任意一个的 "),a("code",{pre:!0},[s._v("close")]),s._v(" 方法都能关闭这个全屏 Loading。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),a("code",{pre:!0},[s._v("$loading")]),s._v("，它的调用方式为："),a("code",{pre:!0},[s._v("this.$loading(options)")]),s._v("，同样会返回一个 Loading 实例。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._v("Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 "),a("code",{pre:!0},[s._v("document.querySelector")]),s._v("以获取到对应 DOM 节点")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("同 "),a("code",{pre:!0},[s._v("v-loading")]),s._v(" 指令中的 "),a("code",{pre:!0},[s._v("body")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("同 "),a("code",{pre:!0},[s._v("v-loading")]),s._v(" 指令中的 "),a("code",{pre:!0},[s._v("fullscreen")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("同 "),a("code",{pre:!0},[s._v("v-loading")]),s._v(" 指令中的 "),a("code",{pre:!0},[s._v("lock")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("显示在加载图标下方的加载文案")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("spinner")]),a("td",[s._v("自定义加载图标类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("background")]),a("td",[s._v("遮罩背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("Loading 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(871)},function(s,t,a){"use strict";function l(s){a(872)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(874),e=a.n(n),r=a(875),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(873);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("56ab69ec",l,!0)},function(s,t,a){t=s.exports=a(109)(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("为网站提供导航功能的菜单。")]),s._m(1),a("p",[s._v("适用广泛的基础用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n <el-menu-item index="1">处理中心</el-menu-item>\n <el-submenu index="2">\n <template slot="title">我的工作台</template>\n <el-menu-item index="2-1">选项1</el-menu-item>\n <el-menu-item index="2-2">选项2</el-menu-item>\n <el-menu-item index="2-3">选项3</el-menu-item>\n </el-submenu>\n <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">\n <el-menu-item index="1">处理中心</el-menu-item>\n <el-submenu index="2">\n <template slot="title">我的工作台</template>\n <el-menu-item index="2-1">选项1</el-menu-item>\n <el-menu-item index="2-2">选项2</el-menu-item>\n <el-menu-item index="2-3">选项3</el-menu-item>\n </el-submenu>\n <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>\n</el-menu>\n\n\n',script:"\n export default {\n data() {\n return {\n activeIndex: '1',\n activeIndex2: '1'\n };\n },\n methods: {\n handleSelect(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("处理中心")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("我的工作台")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("选项2")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("订单管理")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("处理中心")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("我的工作台")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("选项2")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("订单管理")])])],1)],1),a("p",[s._v("导航菜单默认为垂直模式，通过"),a("code",[s._v("mode")]),s._v("属性可以使导航菜单变更为水平模式。另外，在菜单中通过"),a("code",[s._v("submenu")]),s._v("组件可以生成二级菜单。Menu 还提供了"),a("code",[s._v("background-color")]),s._v("、"),a("code",[s._v("text-color")]),s._v("和"),a("code",[s._v("active-text-color")]),s._v("，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("处理中心"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("我的工作台"),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-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("选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("选项3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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(">")]),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-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("订单管理"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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(">")]),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("</"),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-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("处理中心"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("我的工作台"),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-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("选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("选项3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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(">")]),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-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("订单管理"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("垂直菜单，可内嵌子菜单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="tac">\n <el-col :span="12">\n <h5>默认颜色</h5>\n <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">\n <el-submenu index="1">\n <template slot="title">\n <i class="el-icon-location"></i>\n <span>导航一</span>\n </template>\n <el-menu-item-group>\n <template slot="title">分组一</template>\n <el-menu-item index="1-1">选项1</el-menu-item>\n <el-menu-item index="1-2">选项2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="分组2">\n <el-menu-item index="1-3">选项3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">选项4</template>\n <el-menu-item index="1-4-1">选项1</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">\n <i class="el-icon-menu"></i>\n <span slot="title">导航二</span>\n </el-menu-item>\n <el-menu-item index="3">\n <i class="el-icon-setting"></i>\n <span slot="title">导航三</span>\n </el-menu-item>\n </el-menu>\n </el-col>\n <el-col :span="12">\n <h5>自定义颜色</h5>\n <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">\n <el-submenu index="1">\n <template slot="title">\n <i class="el-icon-location"></i>\n <span>导航一</span>\n </template>\n <el-menu-item-group>\n <template slot="title">分组一</template>\n <el-menu-item index="1-1">选项1</el-menu-item>\n <el-menu-item index="1-2">选项2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="分组2">\n <el-menu-item index="1-3">选项3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">选项4</template>\n <el-menu-item index="1-4-1">选项1</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">\n <i class="el-icon-menu"></i>\n <span slot="title">导航二</span>\n </el-menu-item>\n <el-menu-item index="3">\n <i class="el-icon-setting"></i>\n <span slot="title">导航三</span>\n </el-menu-item>\n </el-menu>\n </el-col>\n</el-row>\n\n\n',script:"\n export default {\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:12}},[a("h5",[s._v("默认颜色")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-location"}),a("span",[s._v("导航一")])]),a("el-menu-item-group",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("分组一")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("选项2")])],2),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("选项1")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航二")])]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航三")])])],1)],1),a("el-col",{attrs:{span:12}},[a("h5",[s._v("自定义颜色")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-location"}),a("span",[s._v("导航一")])]),a("el-menu-item-group",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("分组一")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("选项2")])],2),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("选项1")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航二")])]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航三")])])],1)],1)],1)],1),a("p",[s._v("通过"),a("code",[s._v("el-menu-item-group")]),s._v("组件可以实现菜单进行分组，分组名可以通过"),a("code",[s._v("title")]),s._v("属性直接设定，也可以通过具名 slot 来设定。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("默认颜色"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("h5")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("导航一"),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("template")]),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("分组一"),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-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("选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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('"分组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("选项3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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("选项4"),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-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("选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("导航二"),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-menu-item")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("导航三"),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-menu-item")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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("自定义颜色"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("h5")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("导航一"),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("template")]),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("分组一"),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-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("选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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('"分组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("选项3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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("选项4"),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-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("选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("导航二"),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-menu-item")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("导航三"),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-menu-item")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n <el-radio-button :label="false">展开</el-radio-button>\n <el-radio-button :label="true">收起</el-radio-button>\n</el-radio-group>\n<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n <el-submenu index="1">\n <template slot="title">\n <i class="el-icon-location"></i>\n <span slot="title">导航一</span>\n </template>\n <el-menu-item-group>\n <span slot="title">分组一</span>\n <el-menu-item index="1-1">选项1</el-menu-item>\n <el-menu-item index="1-2">选项2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="分组2">\n <el-menu-item index="1-3">选项3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <span slot="title">选项4</span>\n <el-menu-item index="1-4-1">选项1</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">\n <i class="el-icon-menu"></i>\n <span slot="title">导航二</span>\n </el-menu-item>\n <el-menu-item index="3">\n <i class="el-icon-setting"></i>\n <span slot="title">导航三</span>\n </el-menu-item>\n</el-menu>\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n isCollapse: true\n };\n },\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:"\n .el-menu-vertical-demo:not(.el-menu--collapse) {\n width: 200px;\n min-height: 400px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:s.isCollapse,callback:function(t){s.isCollapse=t},expression:"isCollapse"}},[a("el-radio-button",{attrs:{label:!1}},[s._v("展开")]),a("el-radio-button",{attrs:{label:!0}},[s._v("收起")])],1),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"1-4-1",collapse:s.isCollapse},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-location"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航一")])]),a("el-menu-item-group",[a("span",{attrs:{slot:"title"},slot:"title"},[s._v("分组一")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("选项2")])],1),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("span",{attrs:{slot:"title"},slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("选项1")])],1)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航二")])]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航三")])])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("展开"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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("收起"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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(">")]),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('"1-4-1"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("导航一"),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("template")]),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("分组一"),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-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("选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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('"分组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("选项3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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("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("选项4"),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-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("选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("导航二"),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-menu-item")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("导航三"),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-menu-item")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu 导航菜单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ding-lan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 顶栏")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ce-lan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 侧栏")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhe-die"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhe-die","aria-hidden":"true"}},[s._v("¶")]),s._v(" 折叠")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("模式")]),a("td",[s._v("string")]),a("td",[s._v("horizontal / vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("collapse")]),a("td",[s._v("是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("background-color")]),a("td",[s._v("菜单的背景色（仅支持 hex 格式）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("菜单的文字颜色（仅支持 hex 格式）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#303133")])]),a("tr",[a("td",[s._v("active-text-color")]),a("td",[s._v("当前激活菜单的文字颜色（仅支持 hex 格式）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])]),a("tr",[a("td",[s._v("default-active")]),a("td",[s._v("当前激活菜单的 index")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-openeds")]),a("td",[s._v("当前打开的sub-menu的 key 数组")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unique-opened")]),a("td",[s._v("是否只保持一个子菜单的展开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-trigger")]),a("td",[s._v("子菜单打开的触发方式(只在 mode 为 horizontal 时有效)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("router")]),a("td",[s._v("是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-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("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("展开指定的 sub-menu")]),a("td",[s._v("index: 需要打开的 sub-menu 的 index")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("收起指定的 sub-menu")]),a("td",[s._v("index: 需要收起的 sub-menu 的 index")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("菜单激活回调")]),a("td",[s._v("index: 选中菜单项的 index, indexPath: 选中菜单项的 index path")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("sub-menu 展开的回调")]),a("td",[s._v("index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("sub-menu 收起的回调")]),a("td",[s._v("index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"submenu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("唯一标志")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-timeout")]),a("td",[s._v("展开 sub-menu 的延时")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("hide-timeout")]),a("td",[s._v("收起 sub-menu 的延时")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("唯一标志")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("route")]),a("td",[s._v("Vue Router 路径对象")]),a("td",[s._v("Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-group-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("分组标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(877)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(878),n=a.n(l),e=a(879),r=a(0),v=r(n.a,e.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("这是一段内容","标题名称",{confirmButtonText:"确定",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"删除成功!",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"已取消删除",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("请输入邮箱","提示",{confirmButtonText:"确定",cancelButtonText:"取消",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"邮箱格式不正确"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"你的邮箱是: "+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"取消输入"})},200)})},open4:function(){var s=this,t=this.$createElement;this.$msgbox({title:"消息",message:t("p",null,[t("span",null,"内容可以是 "),t("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消",beforeClose:function(s,t,a){"confirm"===s?(t.confirmButtonLoading=!0,t.confirmButtonText="执行中...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})},open5:function(){this.$alert("<strong>这是 <i>HTML</i> 片段</strong>","HTML 片段",{dangerouslyUseHTMLString:!0})},open6:function(){var s=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning",center:!0}).then(function(){s.$message({type:"success",message:"删除成功!"})}).catch(function(){s.$message({type:"info",message:"已取消删除"})})}}}},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("模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。")]),s._m(1),s._m(2),a("p",[s._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="text" @click="open">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$alert('这是一段内容', '标题名称', {\n confirmButtonText: '确定',\n callback: action => {\n this.$message({\n type: 'info',\n message: `action: ${ action }`\n });\n }\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$alert")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("alert")]),s._v("，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，"),a("code",[s._v("message")]),s._v("和"),a("code",[s._v("title")]),s._v("。值得一提的是，窗口被关闭后，它默认会返回一个"),a("code",[s._v("Promise")]),s._v("对象便于进行后续操作的处理。若不确定浏览器是否支持"),a("code",[s._v("Promise")]),s._v("，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("点击打开 Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'这是一段内容'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'标题名称'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'确定'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="text" @click="open2">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open2() {\n this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning'\n }).then(() => {\n this.$message({\n type: 'success',\n message: '删除成功!'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: '已取消删除'\n }); \n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$confirm")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("confirm")]),s._v("。Message Box 组件也拥有极高的定制性，我们可以传入"),a("code",[s._v("options")]),s._v("作为第三个参数，它是一个字面量对象。"),a("code",[s._v("type")]),s._v("字段表明消息类型，可以为"),a("code",[s._v("success")]),s._v("，"),a("code",[s._v("error")]),s._v("，"),a("code",[s._v("info")]),s._v("和"),a("code",[s._v("warning")]),s._v("，无效的设置将会被忽略。注意，第二个参数"),a("code",[s._v("title")]),s._v("必须定义为"),a("code",[s._v("String")]),s._v("类型，如果是"),a("code",[s._v("Object")]),s._v("，会被理解为"),a("code",[s._v("options")]),s._v("。在这里我们用了 Promise 来处理后续响应。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("点击打开 Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'此操作将永久删除该文件, 是否继续?'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'提示'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'确定'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),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("'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("'删除成功!'")]),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("'已取消删除'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="text" @click="open3">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$prompt('请输入邮箱', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n inputErrorMessage: '邮箱格式不正确'\n }).then(({ value }) => {\n this.$message({\n type: 'success',\n message: '你的邮箱是: ' + value\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: '取消输入'\n }); \n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$prompt")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("prompt")]),s._v("。可以用"),a("code",[s._v("inputPattern")]),s._v("字段自己规定匹配模式，或者用"),a("code",[s._v("inputValidator")]),s._v("规定校验函数，可以返回"),a("code",[s._v("Boolean")]),s._v("或"),a("code",[s._v("String")]),s._v("，返回"),a("code",[s._v("false")]),s._v("或字符串时均表示校验未通过，同时返回的字符串相当于定义了"),a("code",[s._v("inputErrorMessage")]),s._v("字段。此外，可以用"),a("code",[s._v("inputPlaceholder")]),s._v("字段来定义输入框的占位符。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("点击打开 Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'请输入邮箱'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'提示'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'确定'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'取消'")]),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("'邮箱格式不正确'")]),s._v("\n }).then("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),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("'你的邮箱是: '")]),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("'取消输入'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("可自定义配置不同内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="text" @click="open4">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open4() {\n const h = this.$createElement;\n this.$msgbox({\n title: '消息',\n message: h('p', null, [\n h('span', null, '内容可以是 '),\n h('i', { style: 'color: teal' }, 'VNode')\n ]),\n showCancelButton: true,\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n beforeClose: (action, instance, done) => {\n if (action === 'confirm') {\n instance.confirmButtonLoading = true;\n instance.confirmButtonText = '执行中...';\n setTimeout(() => {\n done();\n setTimeout(() => {\n instance.confirmButtonLoading = false;\n }, 300);\n }, 3000);\n } else {\n done();\n }\n }\n }).then(action => {\n this.$message({\n type: 'info',\n message: 'action: ' + action\n });\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("以上三个方法都是对"),a("code",[s._v("$msgbox")]),s._v("方法的再包装。本例直接调用"),a("code",[s._v("$msgbox")]),s._v("方法，使用了"),a("code",[s._v("showCancelButton")]),s._v("字段，用于显示取消按钮。另外可使用"),a("code",[s._v("cancelButtonClass")]),s._v("为其添加自定义样式，使用"),a("code",[s._v("cancelButtonText")]),s._v("来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了"),a("code",[s._v("beforeClose")]),s._v("属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数："),a("code",[s._v("action")]),s._v("、实例本身和"),a("code",[s._v("done")]),s._v("方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加"),a("code",[s._v("loading")]),s._v("状态等；此时若需要关闭实例，可以调用"),a("code",[s._v("done")]),s._v("方法（若在"),a("code",[s._v("beforeClose")]),s._v("中没有调用"),a("code",[s._v("done")]),s._v("，则实例不会关闭）。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("点击打开 Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'消息'")]),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("'内容可以是 '")]),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("'确定'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'取消'")]),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("'执行中...'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="text" @click="open5">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {\n dangerouslyUseHTMLString: true\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open5}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("将"),a("code",[s._v("dangerouslyUseHTMLString")]),s._v("属性设置为 true，"),a("code",[s._v("message")]),s._v(" 就会被当作 HTML 片段处理。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("点击打开 Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'<strong>这是 <i>HTML</i> 片段</strong>'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'HTML 片段'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),a("p",[s._v("内容支持居中布局")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="text" @click="open6">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open6() {\n this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning',\n center: true\n }).then(() => {\n this.$message({\n type: 'success',\n message: '删除成功!'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: '已取消删除'\n });\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open6}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("将 "),a("code",[s._v("center")]),s._v(" 设置为 "),a("code",[s._v("true")]),s._v(" 即可开启居中布局")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("点击打开 Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'此操作将永久删除该文件, 是否继续?'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'提示'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'确定'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),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("'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("'删除成功!'")]),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("'已取消删除'")]),s._v("\n });\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),a("p",[s._v("那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。")]),s._m(16),s._m(17)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox-dan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox 弹框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("从场景上说，MessageBox 的作用是美化系统自带的 "),a("code",{pre:!0},[s._v("alert")]),s._v("、"),a("code",{pre:!0},[s._v("confirm")]),s._v(" 和 "),a("code",{pre:!0},[s._v("prompt")]),s._v("，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-xi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 消息提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"que-ren-xiao-xi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 确认消息")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ti-jiao-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 提交内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用 HTML 片段")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" 属性支持传入 HTML 片段")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS 攻击")]),s._v("。因此在 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 打开的情况下，请确保 "),a("code",{pre:!0},[s._v("message")]),s._v(" 的内容是可信的，"),a("strong",[s._v("永远不要")]),s._v("将用户提交的内容赋值给 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ju-zhong-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 居中布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 "),a("code",{pre:!0},[s._v("MessageBox")]),s._v("。调用参数为：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("$msgbox(options)")])]),a("li",[a("code",{pre:!0},[s._v("$alert(message, title, options)")]),s._v(" 或 "),a("code",{pre:!0},[s._v("$alert(message, options)")])]),a("li",[a("code",{pre:!0},[s._v("$confirm(message, title, options)")]),s._v(" 或 "),a("code",{pre:!0},[s._v("$confirm(message, options)")])]),a("li",[a("code",{pre:!0},[s._v("$prompt(message, title, options)")]),s._v(" 或 "),a("code",{pre:!0},[s._v("$prompt(message, options)")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("如果单独引入 "),a("code",{pre:!0},[s._v("MessageBox")]),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(" { 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("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("MessageBox 标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("MessageBox 消息正文内容")]),a("td",[s._v("string / VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("是否将 message 属性作为 HTML 片段处理")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("消息类型，用于显示图标")]),a("td",[s._v("string")]),a("td",[s._v("success / info / warning / error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("MessageBox 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("callback")]),a("td",[s._v("若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调")]),a("td",[s._v("function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("MessageBox 是否显示右上角关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("MessageBox 关闭前的回调，会暂停实例的关闭")]),a("td",[s._v("function(action, instance, done)，action 的值为'confirm'或'cancel'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lockScroll")]),a("td",[s._v("是否在 MessageBox 出现时将 body 滚动锁定")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showCancelButton")]),a("td",[s._v("是否显示取消按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false（以 confirm 和 prompt 方式调用时为 true）")])]),a("tr",[a("td",[s._v("showConfirmButton")]),a("td",[s._v("是否显示确定按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("cancelButtonText")]),a("td",[s._v("取消按钮的文本内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("取消")])]),a("tr",[a("td",[s._v("confirmButtonText")]),a("td",[s._v("确定按钮的文本内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("确定")])]),a("tr",[a("td",[s._v("cancelButtonClass")]),a("td",[s._v("取消按钮的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("confirmButtonClass")]),a("td",[s._v("确定按钮的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closeOnClickModal")]),a("td",[s._v("是否可通过点击遮罩关闭 MessageBox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true（以 alert 方式调用时为 false）")])]),a("tr",[a("td",[s._v("closeOnPressEscape")]),a("td",[s._v("是否可通过按下 ESC 键关闭 MessageBox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true（以 alert 方式调用时为 false）")])]),a("tr",[a("td",[s._v("closeOnHashChange")]),a("td",[s._v("是否在 hashchange 时关闭 MessageBox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showInput")]),a("td",[s._v("是否显示输入框")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false（以 prompt 方式调用时为 true）")])]),a("tr",[a("td",[s._v("inputPlaceholder")]),a("td",[s._v("输入框的占位符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputType")]),a("td",[s._v("输入框的类型")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("inputValue")]),a("td",[s._v("输入框的初始文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputPattern")]),a("td",[s._v("输入框的校验表达式")]),a("td",[s._v("regexp")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValidator")]),a("td",[s._v("输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputErrorMessage")]),a("td",[s._v("校验未通过时的提示文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("输入的数据不合法!")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("是否居中布局")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("roundButton")]),a("td",[s._v("是否使用圆角按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(881)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(882),n=a.n(l),e=a(883),r=a(0),v=r(n.a,e.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";s.exports={methods:{open:function(){this.$message("这是一条消息提示")},openVn:function(){var s=this.$createElement;this.$message({message:s("p",null,[s("span",null,"内容可以是 "),s("i",{style:"color: teal"},"VNode")])})},open2:function(){this.$message({message:"恭喜你，这是一条成功消息",type:"success"})},open3:function(){this.$message({message:"警告哦，这是一条警告消息",type:"warning"})},open4:function(){this.$message.error("错了哦，这是一条错误消息")},open5:function(){this.$message({showClose:!0,message:"这是一条消息提示"})},open6:function(){this.$message({showClose:!0,message:"恭喜你，这是一条成功消息",type:"success"})},open7:function(){this.$message({showClose:!0,message:"警告哦，这是一条警告消息",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"错了哦，这是一条错误消息",type:"error"})},openCenter:function(){this.$message({message:"居中的文字",center:!0})},openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>这是 <i>HTML</i> 片段</strong>"})}}}},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("常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。")]),s._m(1),a("p",[s._v("从顶部出现，3 秒后自动消失。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button :plain="true" @click="open">打开消息提示</el-button>\n <el-button :plain="true" @click="openVn">VNode</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('这是一条消息提示');\n },\n\n openVn() {\n const h = this.$createElement;\n this.$message({\n message: h('p', null, [\n h('span', null, '内容可以是 '),\n h('i', { style: 'color: teal' }, 'VNode')\n ])\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("打开消息提示")]),a("el-button",{attrs:{plain:!0},on:{click:s.openVn}},[s._v("VNode")])]],2),a("p",[s._v("Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个"),a("code",[s._v("$message")]),s._v("方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("打开消息提示"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'这是一条消息提示'")]),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("'内容可以是 '")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button :plain="true" @click="open2">成功</el-button>\n <el-button :plain="true" @click="open3">警告</el-button>\n <el-button :plain="true" @click="open">消息</el-button>\n <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('这是一条消息提示');\n },\n open2() {\n this.$message({\n message: '恭喜你，这是一条成功消息',\n type: 'success'\n });\n },\n\n open3() {\n this.$message({\n message: '警告哦，这是一条警告消息',\n type: 'warning'\n });\n },\n\n open4() {\n this.$message.error('错了哦，这是一条错误消息');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("成功")]),a("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("警告")]),a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("消息")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("错误")])]],2),a("p",[s._v("当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置"),a("code",[s._v("type")]),s._v("字段可以定义不同的状态，默认为"),a("code",[s._v("info")]),s._v("。此时正文内容以"),a("code",[s._v("message")]),s._v("的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入"),a("code",[s._v("type")]),s._v("字段的情况下像"),a("code",[s._v("open4")]),s._v("那样直接调用。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("成功"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("警告"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("消息"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("错误"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'这是一条消息提示'")]),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("'恭喜你，这是一条成功消息'")]),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("'警告哦，这是一条警告消息'")]),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("'错了哦，这是一条错误消息'")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以添加关闭按钮。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button :plain="true" @click="open5">消息</el-button>\n <el-button :plain="true" @click="open6">成功</el-button>\n <el-button :plain="true" @click="open7">警告</el-button>\n <el-button :plain="true" @click="open8">错误</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$message({\n showClose: true,\n message: '这是一条消息提示'\n });\n },\n\n open6() {\n this.$message({\n showClose: true,\n message: '恭喜你，这是一条成功消息',\n type: 'success'\n });\n },\n\n open7() {\n this.$message({\n showClose: true,\n message: '警告哦，这是一条警告消息',\n type: 'warning'\n });\n },\n\n open8() {\n this.$message({\n showClose: true,\n message: '错了哦，这是一条错误消息',\n type: 'error'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("消息")]),a("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("成功")]),a("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("警告")]),a("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("错误")])]],2),a("p",[s._v("默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用"),a("code",[s._v("showClose")]),s._v("字段。此外，和 Notification 一样，Message 拥有可控的"),a("code",[s._v("duration")]),s._v("，设置"),a("code",[s._v("0")]),s._v("为不会被自动关闭，默认为 3000 毫秒。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("消息"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("成功"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("警告"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("错误"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'这是一条消息提示'")]),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("'恭喜你，这是一条成功消息'")]),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("'警告哦，这是一条警告消息'")]),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("'错了哦，这是一条错误消息'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button :plain="true" @click="openCenter">文字居中</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n openCenter() {\n this.$message({\n message: '居中的文字',\n center: true\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.openCenter}},[s._v("文字居中")])]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("文字居中"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'居中的文字'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n openHTML() {\n this.$message({\n dangerouslyUseHTMLString: true,\n message: '<strong>这是 <i>HTML</i> 片段</strong>'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.openHTML}},[s._v("使用 HTML 片段")])]],2),a("p",[s._v("将"),a("code",[s._v("dangerouslyUseHTMLString")]),s._v("属性设置为 true，"),a("code",[s._v("message")]),s._v(" 就会被当作 HTML 片段处理。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("使用 HTML 片段"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'<strong>这是 <i>HTML</i> 片段</strong>'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"message-xiao-xi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message-xiao-xi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message 消息提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-tong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 不同状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-guan-bi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可关闭")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"wen-zi-ju-zhong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 文字居中")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性让文字水平居中。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用 HTML 片段")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" 属性支持传入 HTML 片段")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS 攻击")]),s._v("。因此在 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 打开的情况下，请确保 "),a("code",{pre:!0},[s._v("message")]),s._v(" 的内容是可信的，"),a("strong",[s._v("永远不要")]),s._v("将用户提交的内容赋值给 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 "),a("code",{pre:!0},[s._v("Message")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("单独引入 "),a("code",{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("此时调用方法为 "),a("code",{pre:!0},[s._v("Message(options)")]),s._v("。我们也为每个 type 定义了各自的方法，如 "),a("code",{pre:!0},[s._v("Message.success(options)")]),s._v("。\n并且可以调用 "),a("code",{pre:!0},[s._v("Message.closeAll()")]),s._v(" 手动关闭所有实例。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("消息文字")]),a("td",[s._v("string / VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("自定义图标的类名，会覆盖 "),a("code",{pre:!0},[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("是否将 message 属性作为 HTML 片段处理")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("是否显示关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("文字是否居中")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("关闭时的回调函数, 参数为被关闭的 message 实例")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("调用 "),a("code",{pre:!0},[s._v("Message")]),s._v(" 或 "),a("code",{pre:!0},[s._v("this.$message")]),s._v(" 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 "),a("code",{pre:!0},[s._v("close")]),s._v(" 方法。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭当前的 Message")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(885)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(886),n=a.n(l),e=a(887),r=a(0),v=r(n.a,e.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:"标题名称",message:s("i",{style:"color: teal"},"这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案")})},open2:function(){this.$notify({title:"提示",message:"这是一条不会自动关闭的消息",duration:0})},open3:function(){this.$notify({title:"成功",message:"这是一条成功的提示消息",type:"success"})},open4:function(){this.$notify({title:"警告",message:"这是一条警告的提示消息",type:"warning"})},open5:function(){this.$notify.info({title:"消息",message:"这是一条消息的提示消息"})},open6:function(){this.$notify.error({title:"错误",message:"这是一条错误的提示消息"})},open7:function(){this.$notify({title:"自定义位置",message:"右上角弹出的消息"})},open8:function(){this.$notify({title:"自定义位置",message:"右下角弹出的消息",position:"bottom-right"})},open9:function(){this.$notify({title:"自定义位置",message:"左下角弹出的消息",position:"bottom-left"})},open10:function(){this.$notify({title:"自定义位置",message:"左上角弹出的消息",position:"top-left"})},open11:function(){this.$notify({title:"偏移",message:"这是一条带有偏移的提示消息",offset:100})},open12:function(){this.$notify({title:"HTML 片段",dangerouslyUseHTMLString:!0,message:"<strong>这是 <i>HTML</i> 片段</strong>"})},open13:function(){this.$notify.success({title:"Info",message:"这是一条没有关闭按钮的消息",showClose:!1})},onClose:function(){console.log("Notification 已关闭")}}}},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("悬浮出现在页面角落，显示全局的通知提醒消息。")]),s._m(1),a("p",[s._v("适用性广泛的通知栏")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button plain @click="open">\n 可自动关闭\n </el-button>\n <el-button plain @click="open2">\n 不会自动关闭\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n const h = this.$createElement;\n\n this.$notify({\n title: '标题名称',\n message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')\n });\n },\n\n open2() {\n this.$notify({\n title: '提示',\n message: '这是一条不会自动关闭的消息',\n duration: 0\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n 可自动关闭\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n 不会自动关闭\n ")])]],2),a("p",[s._v("Notification 组件提供通知功能，Element 注册了"),a("code",[s._v("$notify")]),s._v("方法，接收一个"),a("code",[s._v("options")]),s._v("字面量参数，在最简单的情况下，你可以设置"),a("code",[s._v("title")]),s._v("字段和"),a("code",[s._v("message")]),s._v("字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置"),a("code",[s._v("duration")]),s._v("，可以控制关闭的时间间隔，特别的是，如果设置为"),a("code",[s._v("0")]),s._v("，则不会自动关闭。注意："),a("code",[s._v("duration")]),s._v("接收一个"),a("code",[s._v("Number")]),s._v("，单位为毫秒，默认为"),a("code",[s._v("4500")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 可自动关闭\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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 不会自动关闭\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'标题名称'")]),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("'这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'")]),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("'提示'")]),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 "),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button plain @click="open3">\n 成功\n </el-button>\n <el-button plain @click="open4">\n 警告\n </el-button>\n <el-button plain @click="open5">\n 消息\n </el-button>\n <el-button plain @click="open6">\n 错误\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$notify({\n title: '成功',\n message: '这是一条成功的提示消息',\n type: 'success'\n });\n },\n\n open4() {\n this.$notify({\n title: '警告',\n message: '这是一条警告的提示消息',\n type: 'warning'\n });\n },\n\n open5() {\n this.$notify.info({\n title: '消息',\n message: '这是一条消息的提示消息'\n });\n },\n\n open6() {\n this.$notify.error({\n title: '错误',\n message: '这是一条错误的提示消息'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n 成功\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n 警告\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n 消息\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n 错误\n ")])]],2),a("p",[s._v("Element 为 Notification 组件准备了四种通知类型："),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("warning")]),s._v(", "),a("code",[s._v("info")]),s._v(", "),a("code",[s._v("error")]),s._v("。通过"),a("code",[s._v("type")]),s._v("字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入"),a("code",[s._v("type")]),s._v("字段的情况下像"),a("code",[s._v("open5")]),s._v("和"),a("code",[s._v("open6")]),s._v("那样直接调用。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 成功\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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 警告\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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 消息\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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 错误\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'成功'")]),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 "),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("'警告'")]),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 "),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("'消息'")]),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 });\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("'错误'")]),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 });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以让 Notification 从屏幕四角中的任意一角弹出")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button plain @click="open7">\n 右上角\n </el-button>\n <el-button plain @click="open8">\n 右下角\n </el-button>\n <el-button plain @click="open9">\n 左下角\n </el-button>\n <el-button plain @click="open10">\n 左上角\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open7() {\n this.$notify({\n title: '自定义位置',\n message: '右上角弹出的消息'\n });\n },\n\n open8() {\n this.$notify({\n title: '自定义位置',\n message: '右下角弹出的消息',\n position: 'bottom-right'\n });\n },\n\n open9() {\n this.$notify({\n title: '自定义位置',\n message: '左下角弹出的消息',\n position: 'bottom-left'\n });\n },\n\n open10() {\n this.$notify({\n title: '自定义位置',\n message: '左上角弹出的消息',\n position: 'top-left'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n 右上角\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open8}},[s._v("\n 右下角\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open9}},[s._v("\n 左下角\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open10}},[s._v("\n 左上角\n ")])]],2),a("p",[s._v("使用"),a("code",[s._v("position")]),s._v("属性定义 Notification 的弹出位置，支持四个选项："),a("code",[s._v("top-right")]),s._v("、"),a("code",[s._v("top-left")]),s._v("、"),a("code",[s._v("bottom-right")]),s._v("、"),a("code",[s._v("bottom-left")]),s._v("，默认为"),a("code",[s._v("top-right")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 右上角\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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 右下角\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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 左下角\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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 左上角\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'自定义位置'")]),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 });\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("'自定义位置'")]),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 "),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("'自定义位置'")]),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 "),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("'自定义位置'")]),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 "),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("让 Notification 偏移一些位置")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button plain @click="open11">\n 偏移的消息\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open11() {\n this.$notify({\n title: '偏移',\n message: '这是一条带有偏移的提示消息',\n offset: 100\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open11}},[s._v("\n 偏移的消息\n ")])]],2),a("p",[s._v("Notification 提供设置偏移量的功能，通过设置 "),a("code",[s._v("offset")]),s._v(" 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 偏移的消息\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'偏移'")]),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 "),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button plain @click="open12">\n 使用 HTML 片段\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open12() {\n this.$notify({\n title: 'HTML 片段',\n dangerouslyUseHTMLString: true,\n message: '<strong>这是 <i>HTML</i> 片段</strong>'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open12}},[s._v("\n 使用 HTML 片段\n ")])]],2),a("p",[s._v("将"),a("code",[s._v("dangerouslyUseHTMLString")]),s._v("属性设置为 true，"),a("code",[s._v("message")]),s._v(" 就会被当作 HTML 片段处理。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 使用 HTML 片段\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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 片段'")]),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("'<strong>这是 <i>HTML</i> 片段</strong>'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("p",[s._v("可以不显示关闭按钮")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button plain @click="open13">\n 隐藏关闭按钮\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open13() {\n this.$notify.success({\n title: 'Info',\n message: '这是一条没有关闭按钮的消息',\n showClose: false\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open13}},[s._v("\n 隐藏关闭按钮\n ")])]],2),a("p",[s._v("将"),a("code",[s._v("showClose")]),s._v("属性设置为"),a("code",[s._v("false")]),s._v("即可隐藏关闭按钮。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 隐藏关闭按钮\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'这是一条没有关闭按钮的消息'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),a("p",[s._v("单独引入 Notification：")]),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification-tong-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification 通知")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有倾向性")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-dan-chu-wei-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-dan-chu-wei-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义弹出位置")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-pian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有偏移")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用 HTML 片段")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" 属性支持传入 HTML 片段")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS 攻击")]),s._v("。因此在 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 打开的情况下，请确保 "),a("code",{pre:!0},[s._v("message")]),s._v(" 的内容是可信的，"),a("strong",[s._v("永远不要")]),s._v("将用户提交的内容赋值给 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yin-cang-guan-bi-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yin-cang-guan-bi-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 隐藏关闭按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 "),a("code",{pre:!0},[s._v("Vue.prototype")]),s._v(" 添加了全局方法 "),a("code",{pre:!0},[s._v("$notify")]),s._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{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("此时调用方法为 "),a("code",{pre:!0},[s._v("Notification(options)")]),s._v("。我们也为每个 type 定义了各自的方法，如 "),a("code",{pre:!0},[s._v("Notification.success(options)")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("说明文字")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("是否将 message 属性作为 HTML 片段处理")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题样式，如果不在可选值内将被忽略")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("自定义图标的类名。若设置了 "),a("code",{pre:!0},[s._v("type")]),s._v("，则 "),a("code",{pre:!0},[s._v("iconClass")]),s._v(" 会被覆盖")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("position")]),a("td",[s._v("自定义弹出位置")]),a("td",[s._v("string")]),a("td",[s._v("top-right/top-left/bottom-right/bottom-left")]),a("td",[s._v("top-right")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("是否显示关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("关闭时的回调函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("点击 Notification 时的回调函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("调用 "),a("code",{pre:!0},[s._v("Notification")]),s._v(" 或 "),a("code",{pre:!0},[s._v("this.$notify")]),s._v(" 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 "),a("code",{pre:!0},[s._v("close")]),s._v(" 方法。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭当前的 Notification")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(889)},function(s,t,a){"use strict";function l(s){a(890)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(892),e=a.n(n),r=a(893),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(891);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("41bf5a22",l,!0)},function(s,t,a){t=s.exports=a(109)(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={methods:{handleSizeChange:function(s){console.log("每页 "+s+" 条")},handleCurrentChange:function(s){console.log("当前页: "+s)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(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("当数据量过多时，使用分页分解数据。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">页数较少时的效果</span>\n <el-pagination layout="prev, pager, next" :total="50">\n </el-pagination>\n</div>\n<div class="block">\n <span class="demonstration">大于 7 页时的效果</span>\n <el-pagination layout="prev, pager, next" :total="1000">\n </el-pagination>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("页数较少时的效果")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("大于 7 页时的效果")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("设置"),a("code",[s._v("layout")]),s._v("，表示需要显示的内容，用逗号分隔，布局元素会依次显示。"),a("code",[s._v("prev")]),s._v("表示上一页，"),a("code",[s._v("next")]),s._v("为下一页，"),a("code",[s._v("pager")]),s._v("表示页码列表，除此以外还提供了"),a("code",[s._v("jumper")]),s._v("和"),a("code",[s._v("total")]),s._v("，"),a("code",[s._v("size")]),s._v("和特殊的布局符号"),a("code",[s._v("->")]),s._v("，"),a("code",[s._v("->")]),s._v("后的元素会靠右显示，"),a("code",[s._v("jumper")]),s._v("表示跳页元素，"),a("code",[s._v("total")]),s._v("表示显示页码总数，"),a("code",[s._v("size")]),s._v("用于设置每页显示的页码数量。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("页数较少时的效果"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),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("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("大于 7 页时的效果"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),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")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-pagination background layout="prev, pager, next" :total="1000">\n</el-pagination>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1),a("p",[s._v("设置"),a("code",[s._v("background")]),s._v("属性可以为分页按钮添加背景色。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("在空间有限的情况下，可以使用简单的小型分页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-pagination small layout="prev, pager, next" :total="50">\n</el-pagination>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("只需要一个"),a("code",[s._v("small")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("，设为"),a("code",[s._v("true")]),s._v("即可启用。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("根据场景需要，可以添加其他功能模块。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">显示总数</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">调整每页显示条数</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="sizes, prev, pager, next" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">直接前往</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">完整功能</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">\n </el-pagination>\n </div>\n</template>\n\n',script:"\n export default {\n methods: {\n handleSizeChange(val) {\n console.log(`每页 ${val} 条`);\n },\n handleCurrentChange(val) {\n console.log(`当前页: ${val}`);\n }\n },\n data() {\n return {\n currentPage1: 5,\n currentPage2: 5,\n currentPage3: 5,\n currentPage4: 4\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("显示总数")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("调整每页显示条数")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage2=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("直接前往")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("完整功能")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1)]],2),a("p",[s._v("此例是一个完整的用例，使用了"),a("code",[s._v("size-change")]),s._v("和"),a("code",[s._v("current-change")]),s._v("事件来处理页码大小和当前页变动时候触发的事件。"),a("code",[s._v("page-sizes")]),s._v("接受一个整型数组，数组元素为展示的选择每页显示个数的选项，"),a("code",[s._v("[100, 200, 300, 400]")]),s._v("表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("显示总数"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),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("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("调整每页显示条数"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),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("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("直接前往"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),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("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("完整功能"),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-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")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),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("template")]),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(" 条`")]),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("`当前页: "),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination-fen-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination 分页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-bei-jing-se-de-fen-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bei-jing-se-de-fen-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有背景色的分页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-xing-fen-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xing-fen-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 小型分页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-jia-gong-neng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-jia-gong-neng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 附加功能")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("是否使用小型分页样式")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("background")]),a("td",[s._v("是否为分页按钮添加背景色")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("每页显示条目个数")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("总条目数")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("当前页数，支持 .sync 修饰符")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("组件布局，子组件名用逗号分隔")]),a("td",[s._v("String")]),a("td",[a("code",{pre:!0},[s._v("sizes")]),s._v(", "),a("code",{pre:!0},[s._v("prev")]),s._v(", "),a("code",{pre:!0},[s._v("pager")]),s._v(", "),a("code",{pre:!0},[s._v("next")]),s._v(", "),a("code",{pre:!0},[s._v("jumper")]),s._v(", "),a("code",{pre:!0},[s._v("->")]),s._v(", "),a("code",{pre:!0},[s._v("total")]),s._v(", "),a("code",{pre:!0},[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("每页显示个数选择器的选项设置")]),a("td",[s._v("Number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("每页显示个数选择器的下拉框类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prev-text")]),a("td",[s._v("替代图标显示的上一页文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next-text")]),a("td",[s._v("替代图标显示的下一页文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("pageSize 改变时会触发")]),a("td",[s._v("每页条数"),a("code",{pre:!0},[s._v("size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("currentPage 改变时会触发")]),a("td",[s._v("当前页"),a("code",{pre:!0},[s._v("currentPage")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("自定义内容，需要在 "),a("code",{pre:!0},[s._v("layout")]),s._v(" 中列出 "),a("code",{pre:!0},[s._v("slot")])])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(895)},function(s,t,a){"use strict";function l(s){a(896)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(898),e=a.n(n),r=a(899),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(897);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("43fafba4",l,!0)},function(s,t,a){t=s.exports=a(109)(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:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],gridData2:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$info:!0},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$positive:!0}],gridData3:[{tag:"家",date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"家",date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"家",date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],singleSelection:{},multipleSelection:[],model:""}},watch:{singleSelection:function(s){console.log("selection: ",s)},multipleSelection:function(s){console.log("selection: ",s)}},events:{handleClick:function(s){console.log("you clicked ",s)}}}},function(s,t,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:'<el-popover ref="popover1" placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n</el-popover>\n\n<el-popover ref="popover2" placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n</el-popover>\n\n<el-button v-popover:popover1>hover 激活</el-button>\n<el-button v-popover:popover2>click 激活</el-button>\n<el-popover placement="right" title="标题" width="200" trigger="focus" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n <el-button slot="reference">focus 激活</el-button>\n</el-popover>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("hover 激活")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("click 激活")]),a("el-popover",{attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[s._v("focus 激活")])],1)],1),a("p",[s._v("设置索引"),a("code",[s._v("ref")]),s._v("，在按钮中，我们注册了自定义指令"),a("code",[s._v("v-popover")]),s._v("，指向索引ID。"),a("code",[s._v("trigger")]),s._v("属性用于设置何时触发 Popover ，提供三种触发方式："),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" 和 "),a("code",[s._v("focus")]),s._v("。第二种用法通过 "),a("code",[s._v("slot")]),s._v(" 指定 reference。")]),a("div",{staticClass:"highlight",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('"标题"')]),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('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),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(">")]),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('"标题"')]),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('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),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(">")]),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 激活"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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 激活"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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('"标题"')]),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('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),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 激活"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover4" placement="right" width="400" trigger="click">\n <el-table :data="gridData">\n <el-table-column width="150" property="date" label="日期"></el-table-column>\n <el-table-column width="100" property="name" label="姓名"></el-table-column>\n <el-table-column width="300" property="address" label="地址"></el-table-column>\n </el-table>\n</el-popover>\n\n<el-button v-popover:popover4>click 激活</el-button>\n\n\n',script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",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:"日期"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"姓名"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"地址"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("click 激活")])],1),a("p",[s._v("利用分发取代"),a("code",[s._v("content")]),s._v("属性")]),a("div",{staticClass:"highlight",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('"日期"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"地址"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),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 激活"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当然，你还可以嵌套操作，这相比 Dialog 更为轻量：")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover5" placement="top" width="160" v-model="visible2">\n <p>这是一段内容这是一段内容确定删除吗？</p>\n <div style="text-align: right; margin: 0">\n <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>\n <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>\n </div>\n</el-popover>\n\n<el-button v-popover:popover5>删除</el-button>\n\n\n',script:"\n export default {\n data() {\n return {\n visible2: false,\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",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("这是一段内容这是一段内容确定删除吗？")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("取消")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("确定")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("删除")])],1),a("div",{staticClass:"highlight",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("这是一段内容这是一段内容确定删除吗？"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),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("取消"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("确定"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-popover")]),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("删除"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover-dan-chu-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover-dan-chu-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover 弹出框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Popover 的属性与 Tooltip 很类似，它们都是基于"),a("code",{pre:!0},[s._v("Vue-popper")]),s._v("开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qian-tao-xin-xi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-xin-xi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 嵌套信息")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qian-tao-cao-zuo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-cao-zuo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 嵌套操作")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("触发方式")]),a("td",[s._v("String")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("显示的内容，也可以通过 "),a("code",{pre:!0},[s._v("slot")]),s._v(" 传入 DOM")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("宽度")]),a("td",[s._v("String, Number")]),a("td",[s._v("—")]),a("td",[s._v("最小宽度 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("出现位置")]),a("td",[s._v("String")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("Popover 是否可用")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("状态是否可见")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("出现位置的偏移量")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("定义渐变动画")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("是否显示 Tooltip 箭头，更多参数可见"),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 的参数")]),a("td",[s._v("Object")]),a("td",[s._v("参考 "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 文档")]),a("td",[a("code",{pre:!0},[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("为 popper 添加类名")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("触发方式为 hover 时的显示延迟，单位为毫秒")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("Popover 内嵌 HTML 文本")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("触发 Popover 显示的 HTML 元素")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("显示时触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("隐藏时触发")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(901)},function(s,t,a){"use strict";function l(s){a(902)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(904),e=a(0),r=l,v=e(null,n.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var l=a(903);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("2eacfd09",l,!0)},function(s,t,a){t=s.exports=a(109)(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("用于展示操作进度，告知用户当前状态和预期。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[a("div",{staticClass:"source",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("Progress 组件设置"),a("code",[s._v("percentage")]),s._v("属性即可，表示进度条对应的百分比，"),a("strong",[s._v("必填")]),s._v("，必须在 0-100。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("百分比不占用额外控件，适用于文件上传等场景。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[a("div",{staticClass:"source",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",[s._v("Progress 组件可通过 "),a("code",[s._v("stroke-width")]),s._v(" 属性更改进度条的高度，并可通过 "),a("code",[s._v("text-inside")]),s._v(" 属性来将进度条描述置于进度条内部。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[a("div",{staticClass:"source",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("Progress 组件可通过 "),a("code",[s._v("type")]),s._v(" 属性来指定使用环形进度条，在环形进度条中，还可以通过 "),a("code",[s._v("width")]),s._v(" 属性来设置其大小。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress-jin-du-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress 进度条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比外显")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比内显")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 环形进度条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[a("strong",[s._v("百分比（必填）")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("进度条类型")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("进度条的宽度，单位 px")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("进度条显示文字内置在进度条内（只在 type=line 时可用）")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("进度条当前状态")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("环形进度条画布宽度（只在 type=circle 时可用）")]),a("td",[s._v("number")]),a("td"),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("是否显示进度条文字内容")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(906)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(907),n=a(0),e=n(null,l.a,!1,null,null,null);t.default=e.exports},function(s,t,a){"use strict";var l=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"kuai-su-shang-shou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#kuai-su-shang-shou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 快速上手")]),a("p",[s._v("本节将介绍如何在项目中使用 Element。")]),a("h3",{attrs:{id:"shi-yong-starter-kit"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用 Starter Kit")]),a("p",[s._v("我们提供了通用的"),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[s._v("项目模板")]),s._v("，你可以直接使用。对于 Laravel 用户，我们也准备了相应的"),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[s._v("模板")]),s._v("，同样可以直接下载使用。")]),a("p",[s._v("如果不希望使用我们提供的模板，请继续阅读。")]),a("h3",{attrs:{id:"shi-yong-vue-cli"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-vue-cli","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用 vue-cli")]),a("p",[s._v("我们还可以使用 "),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:"yin-ru-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" 引入 Element")]),a("p",[s._v("你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。")]),a("h4",{attrs:{id:"wan-zheng-yin-ru"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wan-zheng-yin-ru","aria-hidden":"true"}},[s._v("¶")]),s._v(" 完整引入")]),a("p",[s._v("在 main.js 中写入以下内容：")]),a("pre",{pre:!0},[a("code",{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("以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。")]),a("h4",{attrs:{id:"an-xu-yin-ru"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按需引入")]),a("p",[s._v("借助 "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v("，我们可以只引入需要的组件，以达到减小项目体积的目的。")]),a("p",[s._v("首先，安装 babel-plugin-component：")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-bash"}},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("然后，将 .babelrc 修改为：")]),a("pre",{pre:!0},[a("code",{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 {\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("接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 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("/* 或写为\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("完整组件列表和引入方式（完整组件列表以 "),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:"quan-ju-pei-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-pei-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局配置")]),a("p",[s._v("在引入 Element 时，可以传入一个全局配置对象。该对象目前仅支持 "),a("code",{pre:!0},[s._v("size")]),s._v(" 字段，用于改变组件的默认尺寸。按照引入 Element 的方式，具体操作如下：")]),a("p",[s._v("完整引入 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("按需引入 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("按照以上设置，项目中所有拥有 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性的组件的默认尺寸均为 'small'。")]),a("h3",{attrs:{id:"kai-shi-shi-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#kai-shi-shi-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 开始使用")]),a("p",[s._v("至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-bash"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("# 执行如下命令后访问 localhost:8086")]),s._v("\nnpm run dev\n")])]),a("p",[s._v("编译：")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-bash"}},[s._v("npm run build\n")])]),a("p",[s._v("各个组件的使用方法请参阅它们各自的文档。")])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(909)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(910),n=a.n(l),e=a(911),r=a(0),v=r(n.a,e.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";s.exports={data:function(){return{radio:"1",radio1:"选中且禁用",radio2:3,radio3:"上海",radio4:"上海",radio5:"上海",radio6:"上海",radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}}},function(s,t,a){"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("在一组备选项中进行单选")]),s._m(1),a("p",[s._v("由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-radio v-model="radio" label="1">备选项</el-radio>\n <el-radio v-model="radio" label="2">备选项</el-radio>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio",{attrs:{label:"1"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("备选项")]),a("el-radio",{attrs:{label:"2"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("备选项")])]],2),a("p",[s._v("要使用 Radio 组件，只需要设置"),a("code",[s._v("v-model")]),s._v("绑定变量，选中意味着变量的值为相应 Radio "),a("code",[s._v("label")]),s._v("属性的值，"),a("code",[s._v("label")]),s._v("可以是"),a("code",[s._v("String")]),s._v("、"),a("code",[s._v("Number")]),s._v("或"),a("code",[s._v("Boolean")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("备选项"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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("备选项"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("单选框不可用的状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>\n <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio1: '选中且禁用'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio",{attrs:{disabled:"",label:"禁用"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("备选项")]),a("el-radio",{attrs:{disabled:"",label:"选中且禁用"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("备选项")])]],2),a("p",[s._v("只要在"),a("code",[s._v("el-radio")]),s._v("元素中设置"),a("code",[s._v("disabled")]),s._v("属性即可，它接受一个"),a("code",[s._v("Boolean")]),s._v("，"),a("code",[s._v("true")]),s._v("为禁用。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"禁用"')]),s._v(">")]),s._v("备选项"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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('"选中且禁用"')]),s._v(">")]),s._v("备选项"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'选中且禁用'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("适用于在多个互斥的选项中选择的场景")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-radio-group v-model="radio2">\n <el-radio :label="3">备选项</el-radio>\n <el-radio :label="6">备选项</el-radio>\n <el-radio :label="9">备选项</el-radio>\n </el-radio-group>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio2: 3\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio-group",{model:{value:s.radio2,callback:function(t){s.radio2=t},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[s._v("备选项")]),a("el-radio",{attrs:{label:6}},[s._v("备选项")]),a("el-radio",{attrs:{label:9}},[s._v("备选项")])],1)]],2),a("p",[s._v("结合"),a("code",[s._v("el-radio-group")]),s._v("元素和子元素"),a("code",[s._v("el-radio")]),s._v("可以实现单选组，在"),a("code",[s._v("el-radio-group")]),s._v("中绑定"),a("code",[s._v("v-model")]),s._v("，在"),a("code",[s._v("el-radio")]),s._v("中设置好"),a("code",[s._v("label")]),s._v("即可，无需再给每一个"),a("code",[s._v("el-radio")]),s._v("绑定变量，另外，还提供了"),a("code",[s._v("change")]),s._v("事件来响应变化，它会传入一个参数"),a("code",[s._v("value")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"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("备选项"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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("备选项"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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("备选项"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("按钮样式的单选组合。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div>\n <el-radio-group v-model="radio3">\n <el-radio-button label="上海"></el-radio-button>\n <el-radio-button label="北京"></el-radio-button>\n <el-radio-button label="广州"></el-radio-button>\n <el-radio-button label="深圳"></el-radio-button>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio4" size="medium">\n <el-radio-button label="上海"></el-radio-button>\n <el-radio-button label="北京"></el-radio-button>\n <el-radio-button label="广州"></el-radio-button>\n <el-radio-button label="深圳"></el-radio-button>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio5" size="small">\n <el-radio-button label="上海"></el-radio-button>\n <el-radio-button label="北京" disabled></el-radio-button>\n <el-radio-button label="广州"></el-radio-button>\n <el-radio-button label="深圳"></el-radio-button>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio6" disabled size="mini">\n <el-radio-button label="上海"></el-radio-button>\n <el-radio-button label="北京"></el-radio-button>\n <el-radio-button label="广州"></el-radio-button>\n <el-radio-button label="深圳"></el-radio-button>\n </el-radio-group>\n </div>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio3: '上海',\n radio4: '上海',\n radio5: '上海',\n radio6: '上海'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-radio-group",{model:{value:s.radio3,callback:function(t){s.radio3=t},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京"}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:s.radio4,callback:function(t){s.radio4=t},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京"}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.radio5,callback:function(t){s.radio5=t},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京",disabled:""}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:s.radio6,callback:function(t){s.radio6=t},expression:"radio6"}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京"}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1)],1)]],2),a("p",[s._v("只需要把"),a("code",[s._v("el-radio")]),s._v("元素换成"),a("code",[s._v("el-radio-button")]),s._v("元素即可，此外，Element 还提供了"),a("code",[s._v("size")]),s._v("属性。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"上海"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"北京"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"广州"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"深圳"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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(">")]),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("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('"上海"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"北京"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"广州"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"深圳"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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(">")]),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("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('"上海"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"北京"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"广州"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"深圳"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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(">")]),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("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('"上海"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"北京"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"广州"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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('"深圳"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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(">")]),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("template")]),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("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio5")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio6")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div>\n <el-radio v-model="radio7" label="1" border>备选项1</el-radio>\n <el-radio v-model="radio7" label="2" border>备选项2</el-radio>\n </div>\n <div style="margin-top: 20px">\n <el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>\n <el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio9" size="small">\n <el-radio label="1" border>备选项1</el-radio>\n <el-radio label="2" border disabled>备选项2</el-radio>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio10" size="mini" disabled>\n <el-radio label="1" border>备选项1</el-radio>\n <el-radio label="2" border>备选项2</el-radio>\n </el-radio-group>\n </div>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio7: '1',\n radio8: '1',\n radio9: '1',\n radio10: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-radio",{attrs:{label:"1",border:""},model:{value:s.radio7,callback:function(t){s.radio7=t},expression:"radio7"}},[s._v("备选项1")]),a("el-radio",{attrs:{label:"2",border:""},model:{value:s.radio7,callback:function(t){s.radio7=t},expression:"radio7"}},[s._v("备选项2")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:s.radio8,callback:function(t){s.radio8=t},expression:"radio8"}},[s._v("备选项1")]),a("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:s.radio8,callback:function(t){s.radio8=t},expression:"radio8"}},[s._v("备选项2")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.radio9,callback:function(t){s.radio9=t},expression:"radio9"}},[a("el-radio",{attrs:{label:"1",border:""}},[s._v("备选项1")]),a("el-radio",{attrs:{label:"2",border:"",disabled:""}},[s._v("备选项2")])],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:s.radio10,callback:function(t){s.radio10=t},expression:"radio10"}},[a("el-radio",{attrs:{label:"1",border:""}},[s._v("备选项1")]),a("el-radio",{attrs:{label:"2",border:""}},[s._v("备选项2")])],1)],1)]],2),a("p",[s._v("设置"),a("code",[s._v("border")]),s._v("属性可以渲染为带有边框的单选框。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("备选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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("备选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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("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("备选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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("备选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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("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("备选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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("备选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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(">")]),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("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("备选项1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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("备选项2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),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(">")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio-dan-xuan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-dan-xuan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio 单选框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-xuan-kuang-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-kuang-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单选框组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-niu-yang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮样式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-bian-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有边框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("Radio 的 value")]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("是否显示边框")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("Radio 的尺寸，仅在 border 为真时有效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,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("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("绑定值变化时触发的事件")]),a("td",[s._v("选中的 Radio label 值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("按钮形式的 Radio 激活时的文本颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("按钮形式的 Radio 激活时的填充色和边框色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("绑定值变化时触发的事件")]),a("td",[s._v("选中的 Radio label 值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("Radio 的 value")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(913)},function(s,t,a){"use strict";function l(s){a(914)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(916),e=a.n(n),r=a(917),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(915);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("dfa58d14",l,!0)},function(s,t,a){t=s.exports=a(109)(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("评分组件")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">默认不区分颜色</span>\n <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n <span class="demonstration">区分颜色</span>\n <el-rate v-model="value2" :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n </el-rate>\n</div>\n\n\n',script:"\n export default {\n data() {\n return {\n value1: null,\n value2: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认不区分颜色")]),a("el-rate",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("区分颜色")]),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]),a("p",[s._v("评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过"),a("code",[s._v("colors")]),s._v("属性设置，而它们对应的两个阈值则通过 "),a("code",[s._v("low-threshold")]),s._v(" 和 "),a("code",[s._v("high-threshold")]),s._v(" 设定。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("默认不区分颜色"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),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("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("区分颜色"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),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\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("用辅助文字直接地表达对应分数")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value3" show-text>\n</el-rate>\n\n\n',script:"\n export default {\n data() {\n return {\n value3: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-rate",{attrs:{"show-text":""},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("p",[s._v("为组件设置 "),a("code",[s._v("show-text")]),s._v(" 属性会在右侧显示辅助文字。通过设置 "),a("code",[s._v("texts")]),s._v(" 可以为每一个分值指定对应的辅助文字。"),a("code",[s._v("texts")]),s._v(" 为一个数组，长度应等于最大值 "),a("code",[s._v("max")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("show-text")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("当有多层评价时，可以用不同类型的 icon 区分评分层级")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<el-rate v-model=\"value4\" :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\" void-icon-class=\"icon-rate-face-off\" :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n\n",script:"\n export default {\n data() {\n return {\n value4: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("设置"),a("code",[s._v("icon-classes")]),s._v("属性可以自定义对应 3 个不同分段的图标。本例还使用"),a("code",[s._v("void-icon-class")]),s._v("指定了未选中时的图标类名。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("只读的评分用来展示分数，允许出现半星")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value5" disabled show-score text-color="#ff9900" score-template="{value}">\n</el-rate>\n\n\n',script:"\n export default {\n data() {\n return {\n value5: 3.7\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value}"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("p",[s._v("为组件设置 "),a("code",[s._v("disabled")]),s._v(" 属性表示组件为只读，支持小数分值。此时若设置 "),a("code",[s._v("show-score")]),s._v("，则会在右侧显示目前的分值。可以提供 "),a("code",[s._v("score-template")]),s._v(" 作为显示模板，模板为一个包含了 "),a("code",[s._v("{value}")]),s._v(" 的字符串，"),a("code",[s._v("{value}")]),s._v(" 会被解析为分值。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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}"')]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate-ping-fen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate 评分")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-zhu-wen-zi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 辅助文字")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qi-ta-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 其它 icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 只读")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大分值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否为只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("是否允许半选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("低分和中等分数的界限值，值本身被划分在低分中")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("高分和中等分数的界限值，值本身被划分在高分中")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("未选中 icon 的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("只读时未选中 icon 的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("未选中 icon 的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("只读时未选中 icon 的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-score")]),a("td",[s._v("是否显示当前分数，show-score 和 show-text 不能同时为真")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("辅助文字的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("辅助文字数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("score-template")]),a("td",[s._v("分数显示模板")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("分值改变时触发")]),a("td",[s._v("改变后的分值")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(919)},function(s,t,a){"use strict";function l(s){a(920)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(922),e=a.n(n),r=a(923),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(921);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("4f4fdf1e",l,!0)},function(s,t,a){t=s.exports=a(109)(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:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options2:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶",disabled:!0},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options3:[{label:"热门城市",options:[{value:"Shanghai",label:"上海"},{value:"Beijing",label:"北京"}]},{label:"城市名",options:[{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"},{value:"Dalian",label:"大连"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"北京"},{value:"Shanghai",label:"上海"},{value:"Nanjing",label:"南京"},{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:"",value10:[],value11:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(s){return{value:s,label:s}})},methods:{remoteMethod:function(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},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("当选项过多时，使用下拉菜单展示并选择内容。")]),s._m(1),a("p",[s._v("适用广泛的基础单选")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value" placeholder="请选择">\n <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶'\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value,callback:function(t){s.value=t},expression:"value"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v("的值为当前被选中的"),a("code",[s._v("el-option")]),s._v("的 value 属性值")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请选择"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'选项1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'双皮奶'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'龙须面'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'北京烤鸭'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value2" placeholder="请选择">\n <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶',\n disabled: true\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value2: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}},s._l(s.options2,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("在"),a("code",[s._v("el-option")]),s._v("中，设定"),a("code",[s._v("disabled")]),s._v("值为 true，即可禁用该选项")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请选择"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'选项1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'双皮奶'")]),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("'选项3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'龙须面'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'北京烤鸭'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("选择器不可用状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value3" disabled placeholder="请选择">\n <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n \n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶'\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value3: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{disabled:"",placeholder:"请选择"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("disabled")]),s._v("属性，则整个选择器不可用")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请选择"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'选项1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'双皮奶'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'龙须面'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'北京烤鸭'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("包含清空按钮，可将选择器清空为初始状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value4" clearable placeholder="请选择">\n <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶'\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value4: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{clearable:"",placeholder:"请选择"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("clearable")]),s._v("属性，则可将选择器清空。需要注意的是，"),a("code",[s._v("clearable")]),s._v("属性仅适用于单选。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请选择"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'选项1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'双皮奶'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'龙须面'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'北京烤鸭'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("适用性较广的基础多选，用 Tag 展示已选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value5" multiple placeholder="请选择">\n <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n\n <el-select v-model="value11" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">\n <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶'\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value5: [],\n value11: []\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",placeholder:"请选择"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})})),a("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"请选择"},model:{value:s.value11,callback:function(t){s.value11=t},expression:"value11"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("multiple")]),s._v("属性即可启用多选，此时"),a("code",[s._v("v-model")]),s._v("的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置"),a("code",[s._v("collapse-tags")]),s._v("属性将它们合并为一段文字。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请选择"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),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('"请选择"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'选项1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'双皮奶'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'龙须面'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'北京烤鸭'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("可以自定义备选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value6" placeholder="请选择">\n <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">\n <span style="float: left">{{ item.label }}</span>\n <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n cities: [{\n value: 'Beijing',\n label: '北京'\n }, {\n value: 'Shanghai',\n label: '上海'\n }, {\n value: 'Nanjing',\n label: '南京'\n }, {\n value: 'Chengdu',\n label: '成都'\n }, {\n value: 'Shenzhen',\n label: '深圳'\n }, {\n value: 'Guangzhou',\n label: '广州'\n }],\n value6: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}},s._l(s.cities,function(t){return a("el-option",{key:t.value,attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[s._v(s._s(t.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(t.value))])])}))]],2),a("p",[s._v("将自定义的 HTML 模板插入"),a("code",[s._v("el-option")]),s._v("的 slot 中即可。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请选择"')]),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("</"),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("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("</"),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-option")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'北京'")]),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("'上海'")]),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("'南京'")]),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("'成都'")]),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("'深圳'")]),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("'广州'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("备选项进行分组展示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value7" placeholder="请选择">\n <el-option-group v-for="group in options3" :key="group.label" :label="group.label">\n <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-option-group>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options3: [{\n label: '热门城市',\n options: [{\n value: 'Shanghai',\n label: '上海'\n }, {\n value: 'Beijing',\n label: '北京'\n }]\n }, {\n label: '城市名',\n options: [{\n value: 'Chengdu',\n label: '成都'\n }, {\n value: 'Shenzhen',\n label: '深圳'\n }, {\n value: 'Guangzhou',\n label: '广州'\n }, {\n value: 'Dalian',\n label: '大连'\n }]\n }],\n value7: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}},s._l(s.options3,function(t){return a("el-option-group",{key:t.label,attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("使用"),a("code",[s._v("el-option-group")]),s._v("对备选项进行分组，它的"),a("code",[s._v("label")]),s._v("属性为分组名")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请选择"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'热门城市'")]),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("'上海'")]),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("'北京'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'城市名'")]),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("'成都'")]),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("'深圳'")]),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("'广州'")]),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("'大连'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可以利用搜索功能快速查找选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value8" filterable placeholder="请选择">\n <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶'\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value8: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{filterable:"",placeholder:"请选择"},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("添加"),a("code",[s._v("filterable")]),s._v("属性即可启用搜索功能。默认情况下，Select 会找出所有"),a("code",[s._v("label")]),s._v("属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个"),a("code",[s._v("filter-method")]),s._v("来实现。"),a("code",[s._v("filter-method")]),s._v("为一个"),a("code",[s._v("Function")]),s._v("，它会在输入值发生变化时调用，参数为当前输入值。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请选择"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'选项1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'双皮奶'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'龙须面'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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("'北京烤鸭'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("从服务器搜索数据，输入关键字进行查找")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value9" multiple filterable="" remote="" reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">\n <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:'\n export default {\n data() {\n return {\n options4: [],\n value9: [],\n list: [],\n loading: false,\n states: ["Alabama", "Alaska", "Arizona",\n "Arkansas", "California", "Colorado",\n "Connecticut", "Delaware", "Florida",\n "Georgia", "Hawaii", "Idaho", "Illinois",\n "Indiana", "Iowa", "Kansas", "Kentucky",\n "Louisiana", "Maine", "Maryland",\n "Massachusetts", "Michigan", "Minnesota",\n "Mississippi", "Missouri", "Montana",\n "Nebraska", "Nevada", "New Hampshire",\n "New Jersey", "New Mexico", "New York",\n "North Carolina", "North Dakota", "Ohio",\n "Oklahoma", "Oregon", "Pennsylvania",\n "Rhode Island", "South Carolina",\n "South Dakota", "Tennessee", "Texas",\n "Utah", "Vermont", "Virginia",\n "Washington", "West Virginia", "Wisconsin",\n "Wyoming"]\n }\n },\n mounted() {\n this.list = this.states.map(item => {\n return { value: item, label: item };\n });\n },\n methods: {\n remoteMethod(query) {\n if (query !== \'\') {\n this.loading = true;\n setTimeout(() => {\n this.loading = false;\n this.options4 = this.list.filter(item => {\n return item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > -1;\n });\n }, 200);\n } else {\n this.options4 = [];\n }\n }\n }\n }\n',style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"请输入关键词","remote-method":s.remoteMethod,loading:s.loading},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}},s._l(s.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为了启用远程搜索，需要将"),a("code",[s._v("filterable")]),s._v("和"),a("code",[s._v("remote")]),s._v("设置为"),a("code",[s._v("true")]),s._v("，同时传入一个"),a("code",[s._v("remote-method")]),s._v("。"),a("code",[s._v("remote-method")]),s._v("为一个"),a("code",[s._v("Function")]),s._v("，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果"),a("code",[s._v("el-option")]),s._v("是通过"),a("code",[s._v("v-for")]),s._v("指令渲染出来的，此时需要为"),a("code",[s._v("el-option")]),s._v("添加"),a("code",[s._v("key")]),s._v("属性，且其值需具有唯一性，比如此例中的"),a("code",[s._v("item.value")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请输入关键词"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("可以创建并选中选项中不存在的条目")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value10" multiple filterable="" allow-create="" default-first-option placeholder="请选择文章标签">\n <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options5: [{\n value: 'HTML',\n label: 'HTML'\n }, {\n value: 'CSS',\n label: 'CSS'\n }, {\n value: 'JavaScript',\n label: 'JavaScript'\n }],\n value10: []\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"请选择文章标签"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}},s._l(s.options5,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("使用"),a("code",[s._v("allow-create")]),s._v("属性即可通过在输入框中输入文字来创建新的条目。注意此时"),a("code",[s._v("filterable")]),s._v("必须为真。本例还使用了"),a("code",[s._v("default-first-option")]),s._v("属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请选择文章标签"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select 选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"you-jin-yong-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-jin-yong-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 有禁用选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-qing-kong-dan-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可清空单选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-duo-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础多选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 远程搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chuang-jian-tiao-mu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 创建条目")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("如果 Select 的绑定值为对象类型，请务必指定 "),a("code",{pre:!0},[s._v("value-key")]),s._v(" 作为它的唯一性标识。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("是否多选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value-key")]),a("td",[s._v("作为 value 唯一标识的键名，绑定值为对象类型时必填")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("单选时是否可以清空选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("collapse-tags")]),a("td",[s._v("多选时是否将选中值按文字的形式展示")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("multiple-limit")]),a("td",[s._v("多选时用户最多可以选择的项目数，为 0 则不限制")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("select input 的 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("请选择")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("是否可搜索")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-create")]),a("td",[s._v("是否允许用户创建新条目，需配合 "),a("code",{pre:!0},[s._v("filterable")]),s._v(" 使用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("自定义搜索方法")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("remote")]),a("td",[s._v("是否为远程搜索")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("remote-method")]),a("td",[s._v("远程搜索方法")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("是否正在从远程获取数据")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading-text")]),a("td",[s._v("远程加载时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("加载中")])]),a("tr",[a("td",[s._v("no-match-text")]),a("td",[s._v("搜索条件无匹配时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("无匹配数据")])]),a("tr",[a("td",[s._v("no-data-text")]),a("td",[s._v("选项为空时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("无数据")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("Select 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-keyword")]),a("td",[s._v("多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-first-option")]),a("td",[s._v("在输入框按下回车，选择第一个匹配项。需配合 "),a("code",{pre:!0},[s._v("filterable")]),s._v(" 或 "),a("code",{pre:!0},[s._v("remote")]),s._v(" 使用")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("选中值发生变化时触发")]),a("td",[s._v("目前的选中值")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("下拉框出现/隐藏时触发")]),a("td",[s._v("出现则为 true，隐藏则为 false")])]),a("tr",[a("td",[s._v("remove-tag")]),a("td",[s._v("多选模式下移除tag时触发")]),a("td",[s._v("移除的tag值")])]),a("tr",[a("td",[s._v("clear")]),a("td",[s._v("可清空的单选模式下用户点击清空按钮时触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("当 input 失去焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("当 input 获得焦点时触发")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("分组的组名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否将该分组下所有选项置为禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("选项的值")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("选项的标签，若不设置则默认与 "),a("code",{pre:!0},[s._v("value")]),s._v(" 相同")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用该选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("使 input 获取焦点")]),a("td",[s._v("-")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(925)},function(s,t,a){"use strict";function l(s){a(926)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(928),e=a.n(n),r=a(929),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(927);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("60dcf017",l,!0)},function(s,t,a){t=s.exports=a(109)(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("通过拖动滑块在一个固定区间内进行选择")]),s._m(1),a("p",[s._v("在拖动滑块时，显示当前值")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-slider v-model="value1"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">自定义初始值</span>\n <el-slider v-model="value2"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">隐藏 Tooltip</span>\n <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">格式化 Tooltip</span>\n <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">禁用</span>\n <el-slider v-model="value5" disabled></el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value1: 0,\n value2: 50,\n value3: 36,\n value4: 48,\n value5: 42\n }\n },\n methods: {\n formatTooltip(val) {\n return val / 100;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-slider",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("自定义初始值")]),a("el-slider",{model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("隐藏 Tooltip")]),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("格式化 Tooltip")]),a("el-slider",{attrs:{"format-tooltip":s.formatTooltip},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("禁用")]),a("el-slider",{attrs:{disabled:""},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]],2),a("p",[s._v("通过设置绑定值自定义滑块的初始值")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("默认"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),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("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("自定义初始值"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),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("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("隐藏 Tooltip"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),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("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("格式化 Tooltip"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),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("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("禁用"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("选项可以是离散的")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">不显示间断点</span>\n <el-slider v-model="value6" :step="10">\n </el-slider>\n </div>\n <div class="block">\n <span class="demonstration">显示间断点</span>\n <el-slider v-model="value7" :step="10" show-stops>\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value6: 0,\n value7: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("不显示间断点")]),a("el-slider",{attrs:{step:10},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("显示间断点")]),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("改变"),a("code",[s._v("step")]),s._v("的值可以改变步长，通过设置"),a("code",[s._v("show-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("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("不显示间断点"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),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("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("显示间断点"),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-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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("通过输入框设置精确数值")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <el-slider v-model="value8" show-input>\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value8: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("show-input")]),s._v("属性会在右侧显示一个输入框")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("支持选择某一数值范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <el-slider v-model="value9" range="" show-stops :max="10">\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value9: [4, 8]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("range")]),s._v("即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <el-slider v-model="value10" vertical height="200px">\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value10: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("vertical")]),s._v("可使 Slider 变成竖向模式，此时必须设置高度"),a("code",[s._v("height")]),s._v("属性")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"slider-hua-kuai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-hua-kuai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider 滑块")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-san-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 离散值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fan-wei-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fan-wei-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 范围选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-xiang-mo-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-xiang-mo-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 竖向模式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("最小值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("100")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("步长")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("show-input")]),a("td",[s._v("是否显示输入框，仅在非范围选择时有效")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-input-controls")]),a("td",[s._v("在显示输入框的情况下，是否显示输入框的控制按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-stops")]),a("td",[s._v("是否显示间断点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-tooltip")]),a("td",[s._v("是否显示 tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("format-tooltip")]),a("td",[s._v("格式化 tooltip message")]),a("td",[s._v("function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("range")]),a("td",[s._v("是否为范围选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("vertical")]),a("td",[s._v("是否竖向模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Slider 高度，竖向模式时必填")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("屏幕阅读器标签")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("输入时的去抖延迟，毫秒，仅在"),a("code",{pre:!0},[s._v("show-input")]),s._v("等于true时有效")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）")]),a("td",[s._v("改变后的值")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(931)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(932),n=a.n(l),e=a(933),r=a(0),v=r(n.a,e.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("引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。")]),s._m(1),a("p",[s._v("简单的步骤条。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :active="active" finish-status="success">\n <el-step title="步骤 1"></el-step>\n <el-step title="步骤 2"></el-step>\n <el-step title="步骤 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">下一步</el-button>\n\n\n',script:"\n export default {\n data() {\n return {\n active: 0\n };\n },\n\n methods: {\n next() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("下一步")])],1),a("p",[s._v("设置"),a("code",[s._v("active")]),s._v("属性，接受一个"),a("code",[s._v("Number")]),s._v("，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置"),a("code",[s._v("space")]),s._v("属性即可，它接受"),a("code",[s._v("Boolean")]),s._v("，单位为"),a("code",[s._v("px")]),s._v("，如果不设置，则为自适应。设置"),a("code",[s._v("finish-status")]),s._v("属性可以改变已经完成的步骤的状态。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"步骤 1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 3"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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(">")]),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("下一步"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("每一步骤显示出该步骤的状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="200" :active="1" finish-status="success">\n <el-step title="已完成"></el-step>\n <el-step title="进行中"></el-step>\n <el-step title="步骤 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"已完成"}}),a("el-step",{attrs:{title:"进行中"}}),a("el-step",{attrs:{title:"步骤 3"}})],1)],1),a("p",[s._v("也可以使用"),a("code",[s._v("title")]),s._v("具名分发，可以用"),a("code",[s._v("slot")]),s._v("的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"已完成"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"进行中"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 3"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("每个步骤有其对应的步骤状态描述。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :active="1">\n <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤 3" description="这段就没那么长了"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:1}},[a("el-step",{attrs:{title:"步骤 1",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤 2",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤 3",description:"这段就没那么长了"}})],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"步骤 1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"这段就没那么长了"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("标题和描述都将居中。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :active="2" align-center>\n <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:2,"align-center":""}},[a("el-step",{attrs:{title:"步骤1",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤2",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤3",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤4",description:"这是一段很长很长很长的描述性文字"}})],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"步骤1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("步骤条内可以启用各种自定义的图标。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n<el-steps :active="1">\n <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n <el-step title="步骤 3" icon="el-icon-picture"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:1}},[a("el-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),a("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),a("el-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1)],1),a("p",[s._v("通过"),a("code",[s._v("icon")]),s._v("属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名"),a("code",[s._v("slot")]),s._v("来使用自定义的图标。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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(":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('"步骤 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("竖直方向的步骤条。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div style="height: 300px;">\n <el-steps direction="vertical" :active="1">\n <el-step title="步骤 1"></el-step>\n <el-step title="步骤 2"></el-step>\n <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>\n </el-steps>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticStyle:{height:"300px"}},[a("el-steps",{attrs:{direction:"vertical",active:1}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3",description:"这是一段很长很长很长的描述性文字"}})],1)],1)]),a("p",[s._v("只需要在"),a("code",[s._v("el-steps")]),s._v("元素中设置"),a("code",[s._v("direction")]),s._v("属性为"),a("code",[s._v("vertical")]),s._v("即可。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"步骤 1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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(">")]),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")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n<el-steps :active="1" simple>\n <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n <el-step title="步骤 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n <el-step title="步骤 1"></el-step>\n <el-step title="步骤 2"></el-step>\n <el-step title="步骤 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:1,simple:""}},[a("el-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),a("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),a("el-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1),a("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3"}})],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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(":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('"步骤 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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(">")]),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('"步骤 1"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 2"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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('"步骤 3"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),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(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps 步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"han-zhuang-tai-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#han-zhuang-tai-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 含状态步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"you-miao-shu-de-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-miao-shu-de-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 有描述的步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ju-zhong-de-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-de-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 居中的步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-tu-biao-de-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-biao-de-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带图标的步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-shi-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-shi-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 竖式步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jian-ji-feng-ge-de-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-ji-feng-ge-de-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 简洁风格的步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("设置 "),a("code",{pre:!0},[s._v("simple")]),s._v(" 可应用简洁风格，该条件下 "),a("code",{pre:!0},[s._v("align-center")]),s._v(" / "),a("code",{pre:!0},[s._v("description")]),s._v(" / "),a("code",{pre:!0},[s._v("direction")]),s._v(" / "),a("code",{pre:!0},[s._v("space")]),s._v(" 都将失效。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("每个 step 的间距，不填写将自适应间距。支持百分比。")]),a("td",[s._v("number / string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("显示方向")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("设置当前激活步骤")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("设置当前步骤的状态")]),a("td",[s._v("string")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("设置结束步骤的状态")]),a("td",[s._v("string")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("进行居中对齐")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("simple")]),a("td",[s._v("是否应用简洁风格")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("描述性文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标")]),a("td",[s._v("传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("设置当前步骤的状态，不设置则根据 steps 确定状态")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("描述性文字")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(935)},function(s,t,a){"use strict";function l(s){a(936)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(938),e=a.n(n),r=a(939),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(937);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("145e6e18",l,!0)},function(s,t,a){t=s.exports=a(109)(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("表示两种相互对立的状态间的切换，多用于触发「开/关」。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949">\n</el-switch>\n\n\n',script:"\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("p",[s._v("绑定"),a("code",[s._v("v-model")]),s._v("到一个"),a("code",[s._v("Boolean")]),s._v("类型的变量。可以使用"),a("code",[s._v("active-color")]),s._v("属性与"),a("code",[s._v("inactive-color")]),s._v("属性来设置开关的背景色。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value3" active-text="按月付费" inactive-text="按年付费">\n</el-switch>\n<el-switch style="display: block" v-model="value4" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费">\n</el-switch>\n\n\n',script:"\n export default {\n data() {\n return {\n value3: true,\n value4: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-switch",{attrs:{"active-text":"按月付费","inactive-text":"按年付费"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}}),a("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"按月付费","inactive-text":"按年付费"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("使用"),a("code",[s._v("active-text")]),s._v("属性与"),a("code",[s._v("inactive-text")]),s._v("属性来设置开关的文字描述。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"按月付费"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-text")]),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-switch")]),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('"按月付费"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inactive-text")]),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-switch")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n <el-switch v-model="value5" active-color="#13ce66" inactive-color="#ff4949" active-value="100" inactive-value="0">\n </el-switch>\n</el-tooltip>\n\n\n',script:"\n export default {\n data() {\n return {\n value5: '100'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tooltip",{attrs:{content:"Switch value: "+s.value5,placement:"top"}},[a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)],1),a("p",[s._v("设置"),a("code",[s._v("active-value")]),s._v("和"),a("code",[s._v("inactive-value")]),s._v("属性，接受"),a("code",[s._v("Boolean")]),s._v(", "),a("code",[s._v("String")]),s._v("或"),a("code",[s._v("Number")]),s._v("类型的值。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value6" disabled>\n</el-switch>\n<el-switch v-model="value7" disabled>\n</el-switch>\n\n',script:"\n export default {\n data() {\n return {\n value6: true,\n value7: false\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-switch",{attrs:{disabled:""},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}}),a("el-switch",{attrs:{disabled:""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1),a("p",[s._v("设置"),a("code",[s._v("disabled")]),s._v("属性，接受一个"),a("code",[s._v("Boolean")]),s._v("，设置"),a("code",[s._v("true")]),s._v("即可禁用。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch-kai-guan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch 开关")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"wen-zi-miao-shu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-miao-shu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 文字描述")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"kuo-zhan-de-value-lei-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#kuo-zhan-de-value-lei-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 扩展的 value 类型")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("switch 的宽度（像素）")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("40")])]),a("tr",[a("td",[s._v("active-icon-class")]),a("td",[s._v("switch 打开时所显示图标的类名，设置此项会忽略 "),a("code",{pre:!0},[s._v("active-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inactive-icon-class")]),a("td",[s._v("switch 关闭时所显示图标的类名，设置此项会忽略 "),a("code",{pre:!0},[s._v("inactive-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("active-text")]),a("td",[s._v("switch 打开时的文字描述")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inactive-text")]),a("td",[s._v("switch 关闭时的文字描述")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("active-value")]),a("td",[s._v("switch 打开时的值")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("inactive-value")]),a("td",[s._v("switch 关闭时的值")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-color")]),a("td",[s._v("switch 打开时的背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])]),a("tr",[a("td",[s._v("inactive-color")]),a("td",[s._v("switch 关闭时的背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("switch 对应的 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("switch 状态发生变化时的回调函数")]),a("td",[s._v("新状态的值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("使 Switch 获取焦点")]),a("td",[s._v("-")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(941)},function(s,t,a){"use strict";function l(s){a(942)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(944),e=a.n(n),r=a(945),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(943);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("7bfc81e8",l,!0)},function(s,t,a){t=s.exports=a(109)(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:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"}],tableData2:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$info:!0},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$positive:!0}],tableData3:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333}],tableData4:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}],tableData5:[{id:"12987122",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987123",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987125",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987126",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"}],tableData6:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4.1",amount3:15}],currentRow:null,multipleSelection:[]}},methods:{getSummaries:function(s){var t=s.columns,a=s.data,l=[];return t.forEach(function(s,t){if(0===t)return void(l[t]="总价");var n=a.map(function(t){return Number(t[s.property])});n.every(function(s){return isNaN(s)})?l[t]="N/A":(l[t]=n.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0),l[t]+=" 元")}),l},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var t=this;s?s.forEach(function(s){t.$refs.multipleTable.toggleRowSelection(s)}):this.$refs.multipleTable.clearSelection()},handleClick:function(s){console.log(s)},handleEdit:function(s,t){console.log(s,t)},handleDelete:function(s,t){console.log(s,t)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,t){return s.address},filterTag:function(s,t){return t.tag===s},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("用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。")]),s._m(1),a("p",[s._v("基础的表格展示用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:' <template>\n <el-table :data="tableData" style="width: 100%">\n <el-table-column prop="date" label="日期" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="180">\n </el-table-column>\n <el-table-column prop="address" label="地址">\n </el-table-column>\n </el-table>\n </template>\n\n \n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }]\n }\n }\n }\n ",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("当"),a("code",[s._v("el-table")]),s._v("元素中注入"),a("code",[s._v("data")]),s._v("对象数组后，在"),a("code",[s._v("el-table-column")]),s._v("中用"),a("code",[s._v("prop")]),s._v("属性来对应对象中的键名即可填入数据，用"),a("code",[s._v("label")]),s._v("属性来定义表格的列名。可以使用"),a("code",[s._v("width")]),s._v("属性来定义列宽。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"日期"')]),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("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n }]\n }\n }\n }\n ")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("使用带斑马纹的表格，可以更容易区分出不同行的数据。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" stripe style="width: 100%">\n <el-table-column prop="date" label="日期" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="180">\n </el-table-column>\n <el-table-column prop="address" label="地址">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[a("code",[s._v("stripe")]),s._v("属性可以创建带斑马纹的表格。它接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即为启用。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"日期"')]),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("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" border style="width: 100%">\n <el-table-column prop="date" label="日期" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="180">\n </el-table-column>\n <el-table-column prop="address" label="地址">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用"),a("code",[s._v("border")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可启用。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"日期"')]),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("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">\n <el-table-column prop="date" label="日期" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="180">\n </el-table-column>\n <el-table-column prop="address" label="地址">\n </el-table-column>\n </el-table>\n</template>\n\n\n\n\n',script:"\n export default {\n methods: {\n tableRowClassName({row, rowIndex}) {\n if (rowIndex === 1) {\n return 'warning-row';\n } else if (rowIndex === 3) {\n return 'success-row';\n }\n return '';\n }\n },\n data() {\n return {\n tableData2: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄',\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄',\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }]\n }\n }\n }\n",style:"\n .el-table .warning-row {\n background: oldlace;\n }\n\n .el-table .success-row {\n background: #f0f9eb;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("可以通过指定 Table 组件的 "),a("code",[s._v("row-class-name")]),s._v(" 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"日期"')]),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("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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-02'")]),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("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("纵向内容过多时，可选择固定表头。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData3" height="250" border style="width: 100%">\n <el-table-column prop="date" label="日期" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="180">\n </el-table-column>\n <el-table-column prop="address" label="地址">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-08',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-06',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-07',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250",border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("只要在"),a("code",[s._v("el-table")]),s._v("元素中定义了"),a("code",[s._v("height")]),s._v("属性，即可实现固定表头的表格，而不需要额外的代码。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("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('"日期"')]),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("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("横向内容过多时，可选择固定列。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" border style="width: 100%">\n <el-table-column fixed prop="date" label="日期" width="150">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="120">\n </el-table-column>\n <el-table-column prop="province" label="省份" width="120">\n </el-table-column>\n <el-table-column prop="city" label="市区" width="120">\n </el-table-column>\n <el-table-column prop="address" label="地址" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="邮编" width="120">\n </el-table-column>\n <el-table-column fixed="right" label="操作" width="100">\n <template slot-scope="scope">\n <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>\n <el-button type="text" size="small">编辑</el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n methods: {\n handleClick(row) {\n console.log(row);\n }\n },\n\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-02',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-04',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-01',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"100"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:function(a){s.handleClick(t.row)}}},[s._v("查看")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("编辑")])]}}])})],1)]],2),a("p",[s._v("固定列需要使用"),a("code",[s._v("fixed")]),s._v("属性，它接受 Boolean 值或者"),a("code",[s._v("left")]),a("code",[s._v("right")]),s._v("，表示左边固定还是右边固定。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("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('"日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"province"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"省份"')]),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("el-table-column")]),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('"市区"')]),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("el-table-column")]),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('"地址"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"邮编"')]),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("el-table-column")]),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('"操作"')]),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(">")]),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(scope.row)"')]),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("查看"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("编辑"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),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-column")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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(row) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(row);\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("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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("横纵内容过多时，可选择固定列和表头。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData3" style="width: 100%" height="250">\n <el-table-column fixed prop="date" label="日期" width="150">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="120">\n </el-table-column>\n <el-table-column prop="province" label="省份" width="120">\n </el-table-column>\n <el-table-column prop="city" label="市区" width="120">\n </el-table-column>\n <el-table-column prop="address" label="地址" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="邮编" width="120">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-02',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-04',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-01',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-08',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-06',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-07',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)]],2),a("p",[s._v("固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"province"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"省份"')]),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("el-table-column")]),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('"市区"')]),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("el-table-column")]),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('"地址"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"邮编"')]),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("el-table-column")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("当数据量动态变化时，可以为 Table 设置一个最大高度。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData4" style="width: 100%" max-height="250">\n <el-table-column fixed prop="date" label="日期" width="150">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="120">\n </el-table-column>\n <el-table-column prop="province" label="省份" width="120">\n </el-table-column>\n <el-table-column prop="city" label="市区" width="120">\n </el-table-column>\n <el-table-column prop="address" label="地址" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="邮编" width="120">\n </el-table-column>\n <el-table-column fixed="right" label="操作" width="120">\n <template slot-scope="scope">\n <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">\n 移除\n </el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n methods: {\n deleteRow(index, rows) {\n rows.splice(index, 1);\n }\n },\n data() {\n return {\n tableData4: [{\n date: '2016-05-03',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-02',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-04',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-01',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-08',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-06',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-07',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"120"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n 移除\n ")])]}}])})],1)]],2),a("p",[s._v("通过设置"),a("code",[s._v("max-height")]),s._v("属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"province"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"省份"')]),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("el-table-column")]),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('"市区"')]),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("el-table-column")]),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('"地址"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"邮编"')]),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("el-table-column")]),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('"操作"')]),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 移除\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),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-column")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData3" style="width: 100%">\n <el-table-column prop="date" label="日期" width="150">\n </el-table-column>\n <el-table-column label="配送信息">\n <el-table-column prop="name" label="姓名" width="120">\n </el-table-column>\n <el-table-column label="地址">\n <el-table-column prop="province" label="省份" width="120">\n </el-table-column>\n <el-table-column prop="city" label="市区" width="120">\n </el-table-column>\n <el-table-column prop="address" label="地址" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="邮编" width="120">\n </el-table-column>\n </el-table-column>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-02',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-04',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-01',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-08',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-06',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-07',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{label:"配送信息"}},[a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{label:"地址"}},[a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)],1)],1)]],2),a("p",[s._v("只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"配送信息"')]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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('"province"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"省份"')]),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("el-table-column")]),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('"市区"')]),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("el-table-column")]),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('"地址"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"邮编"')]),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("el-table-column")]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("选择单行数据时使用色块表示。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">\n <el-table-column type="index" width="50">\n </el-table-column>\n <el-table-column property="date" label="日期" width="120">\n </el-table-column>\n <el-table-column property="name" label="姓名" width="120">\n </el-table-column>\n <el-table-column property="address" label="地址">\n </el-table-column>\n </el-table>\n <div style="margin-top: 20px">\n <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>\n <el-button @click="setCurrent()">取消选择</el-button>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }],\n currentRow: null\n }\n },\n\n methods: {\n setCurrent(row) {\n this.$refs.singleTable.setCurrentRow(row);\n },\n handleCurrentChange(val) {\n this.currentRow = val;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),a("el-table-column",{attrs:{property:"date",label:"日期",width:"120"}}),a("el-table-column",{attrs:{property:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"地址"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.setCurrent(s.tableData[1])}}},[s._v("选中第二行")]),a("el-button",{on:{click:function(t){s.setCurrent()}}},[s._v("取消选择")])],1)]],2),a("p",[s._v("Table 组件提供了单选的支持，只需要配置"),a("code",[s._v("highlight-current-row")]),s._v("属性即可实现单选。之后由"),a("code",[s._v("current-change")]),s._v("事件来管理选中时触发的事件，它会传入"),a("code",[s._v("currentRow")]),s._v("，"),a("code",[s._v("oldCurrentRow")]),s._v("。如果需要显示索引，可以增加一列"),a("code",[s._v("el-table-column")]),s._v("，设置"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("index")]),s._v("即可显示从 1 开始的索引号。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"日期"')]),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("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),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("选中第二行"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("取消选择"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("选择多行数据时使用 Checkbox。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">\n <el-table-column type="selection" width="55">\n </el-table-column>\n <el-table-column label="日期" width="120">\n <template slot-scope="scope">{{ scope.row.date }}</template>\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="120">\n </el-table-column>\n <el-table-column prop="address" label="地址" show-overflow-tooltip>\n </el-table-column>\n </el-table>\n <div style="margin-top: 20px">\n <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>\n <el-button @click="toggleSelection()">取消选择</el-button>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-08',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-06',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-07',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }],\n multipleSelection: []\n }\n },\n\n methods: {\n toggleSelection(rows) {\n if (rows) {\n rows.forEach(row => {\n this.$refs.multipleTable.toggleRowSelection(row);\n });\n } else {\n this.$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n this.multipleSelection = val;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3,"tooltip-effect":"dark"},on:{"selection-change":s.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),a("el-table-column",{attrs:{label:"日期",width:"120"},scopedSlots:s._u([{key:"default",fn:function(t){return[s._v(s._s(t.row.date))]}}])}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址","show-overflow-tooltip":""}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.toggleSelection([s.tableData3[1],s.tableData3[2]])}}},[s._v("切换第二、第三行的选中状态")]),a("el-button",{on:{click:function(t){s.toggleSelection()}}},[s._v("取消选择")])],1)]],2),a("p",[s._v("实现多选非常简单: 手动添加一个"),a("code",[s._v("el-table-column")]),s._v("，设"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("selection")]),s._v("即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用"),a("code",[s._v("show-overflow-tooltip")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，为"),a("code",[s._v("true")]),s._v("时多余的内容会在 hover 时以 tooltip 的形式显示出来。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("tooltip-effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"日期"')]),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("</"),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-column")]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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(">")]),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("切换第二、第三行的选中状态"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("取消选择"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("对表格进行排序，可快速查找或对比数据。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" style="width: 100%" :default-sort="{prop: \'date\', order: \'descending\'}">\n <el-table-column prop="date" label="日期" sortable width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名" sortable width="180">\n </el-table-column>\n <el-table-column prop="address" label="地址" :formatter="formatter">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,"default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",formatter:s.formatter}})],1)]],2),a("p",[s._v("在列中设置"),a("code",[s._v("sortable")]),s._v("属性即可实现以该列为基准的排序，接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("。可以通过 Table 的"),a("code",[s._v("default-sort")]),s._v("属性设置默认的排序列和排序顺序。可以使用"),a("code",[s._v("sort-method")]),s._v("或者"),a("code",[s._v("sort-by")]),s._v("使用自定义的排序规则。如果需要后端排序，需将"),a("code",[s._v("sortable")]),s._v("设置为"),a("code",[s._v("custom")]),s._v("，同时在 Table 上监听"),a("code",[s._v("sort-change")]),s._v("事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了"),a("code",[s._v("formatter")]),s._v("属性，它用于格式化指定列的值，接受一个"),a("code",[s._v("Function")]),s._v("，会传入两个参数："),a("code",[s._v("row")]),s._v("和"),a("code",[s._v("column")]),s._v("，可以根据自己的需求进行处理。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("\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 >")]),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('"日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"地址"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("对表格进行筛选，可快速查找到自己想看的数据。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" style="width: 100%">\n <el-table-column prop="date" label="日期" sortable width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="180">\n </el-table-column>\n <el-table-column prop="address" label="地址" :formatter="formatter">\n </el-table-column>\n <el-table-column prop="tag" label="标签" width="100" :filters="[{ text: \'家\', value: \'家\' }, { text: \'公司\', value: \'公司\' }]" :filter-method="filterTag" filter-placement="bottom-end">\n <template slot-scope="scope">\n <el-tag :type="scope.row.tag === \'家\' ? \'primary\' : \'success\'" close-transition>{{scope.row.tag}}</el-tag>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄',\n tag: '家'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄',\n tag: '公司'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄',\n tag: '家'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄',\n tag: '公司'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n },\n filterTag(value, row) {\n return row.tag === value;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"标签",width:"100",filters:[{text:"家",value:"家"},{text:"公司",value:"公司"}],"filter-method":s.filterTag,"filter-placement":"bottom-end"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-tag",{attrs:{type:"家"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}}])})],1)]],2),a("p",[s._v("在列中设置"),a("code",[s._v("filters")]),a("code",[s._v("filter-method")]),s._v("属性即可开启该列的筛选，filters 是一个数组，"),a("code",[s._v("filter-method")]),s._v("是一个方法，它用于决定某些数据是否显示，会传入两个参数："),a("code",[s._v("value")]),s._v("和"),a("code",[s._v("row")]),s._v("。")]),a("div",{staticClass:"highlight",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('"日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"标签"')]),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: '家', value: '家' }, { text: '公司', value: '公司' }]\"")]),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 === '家' ? '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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'家'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'公司'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'家'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),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 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 }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("自定义列的显示内容，可组合其他组件使用。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" style="width: 100%">\n <el-table-column label="日期" width="180">\n <template slot-scope="scope">\n <i class="el-icon-time"></i>\n <span style="margin-left: 10px">{{ scope.row.date }}</span>\n </template>\n </el-table-column>\n <el-table-column label="姓名" width="180">\n <template slot-scope="scope">\n <el-popover trigger="hover" placement="top">\n <p>姓名: {{ scope.row.name }}</p>\n <p>住址: {{ scope.row.address }}</p>\n <div slot="reference" class="name-wrapper">\n <el-tag size="medium">{{ scope.row.name }}</el-tag>\n </div>\n </el-popover>\n </template>\n </el-table-column>\n <el-table-column label="操作">\n <template slot-scope="scope">\n <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>\n <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }]\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{label:"日期",width:"180"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("i",{staticClass:"el-icon-time"}),a("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(t.row.date))])]}}])}),a("el-table-column",{attrs:{label:"姓名",width:"180"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[s._v("姓名: "+s._s(t.row.name))]),a("p",[s._v("住址: "+s._s(t.row.address))]),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[s._v(s._s(t.row.name))])],1)])]}}])}),a("el-table-column",{attrs:{label:"操作"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("编辑")]),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("删除")])]}}])})],1)]],2),a("p",[s._v("通过 "),a("code",[s._v("Scoped slot")]),s._v(" 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"日期"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("</"),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("template")]),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(">")]),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('"姓名"')]),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("姓名: {{ scope.row.name }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),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("住址: {{ scope.row.address }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(">")]),s._v("\n "),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-column")]),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('"操作"')]),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("编辑"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("删除"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),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-column")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(15),a("p",[s._v("当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData5" style="width: 100%">\n <el-table-column type="expand">\n <template slot-scope="props">\n <el-form label-position="left" inline class="demo-table-expand">\n <el-form-item label="商品名称">\n <span>{{ props.row.name }}</span>\n </el-form-item>\n <el-form-item label="所属店铺">\n <span>{{ props.row.shop }}</span>\n </el-form-item>\n <el-form-item label="商品 ID">\n <span>{{ props.row.id }}</span>\n </el-form-item>\n <el-form-item label="店铺 ID">\n <span>{{ props.row.shopId }}</span>\n </el-form-item>\n <el-form-item label="商品分类">\n <span>{{ props.row.category }}</span>\n </el-form-item>\n <el-form-item label="店铺地址">\n <span>{{ props.row.address }}</span>\n </el-form-item>\n <el-form-item label="商品描述">\n <span>{{ props.row.desc }}</span>\n </el-form-item>\n </el-form>\n </template>\n </el-table-column>\n <el-table-column label="商品 ID" prop="id">\n </el-table-column>\n <el-table-column label="商品名称" prop="name">\n </el-table-column>\n <el-table-column label="描述" prop="desc">\n </el-table-column>\n </el-table>\n</template>\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n tableData5: [{\n id: '12987122',\n name: '好滋好味鸡蛋仔',\n category: '江浙小吃、小吃零食',\n desc: '荷兰优质淡奶，奶香浓而不腻',\n address: '上海市普陀区真北路',\n shop: '王小虎夫妻店',\n shopId: '10333'\n }, {\n id: '12987123',\n name: '好滋好味鸡蛋仔',\n category: '江浙小吃、小吃零食',\n desc: '荷兰优质淡奶，奶香浓而不腻',\n address: '上海市普陀区真北路',\n shop: '王小虎夫妻店',\n shopId: '10333'\n }, {\n id: '12987125',\n name: '好滋好味鸡蛋仔',\n category: '江浙小吃、小吃零食',\n desc: '荷兰优质淡奶，奶香浓而不腻',\n address: '上海市普陀区真北路',\n shop: '王小虎夫妻店',\n shopId: '10333'\n }, {\n id: '12987126',\n name: '好滋好味鸡蛋仔',\n category: '江浙小吃、小吃零食',\n desc: '荷兰优质淡奶，奶香浓而不腻',\n address: '上海市普陀区真北路',\n shop: '王小虎夫妻店',\n shopId: '10333'\n }]\n }\n }\n }\n",style:"\n .demo-table-expand {\n font-size: 0;\n }\n .demo-table-expand label {\n width: 90px;\n color: #99a9bf;\n }\n .demo-table-expand .el-form-item {\n margin-right: 0;\n margin-bottom: 0;\n width: 50%;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData5}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-form",{staticClass:"demo-table-expand",attrs:{"label-position":"left",inline:""}},[a("el-form-item",{attrs:{label:"商品名称"}},[a("span",[s._v(s._s(t.row.name))])]),a("el-form-item",{attrs:{label:"所属店铺"}},[a("span",[s._v(s._s(t.row.shop))])]),a("el-form-item",{attrs:{label:"商品 ID"}},[a("span",[s._v(s._s(t.row.id))])]),a("el-form-item",{attrs:{label:"店铺 ID"}},[a("span",[s._v(s._s(t.row.shopId))])]),a("el-form-item",{attrs:{label:"商品分类"}},[a("span",[s._v(s._s(t.row.category))])]),a("el-form-item",{attrs:{label:"店铺地址"}},[a("span",[s._v(s._s(t.row.address))])]),a("el-form-item",{attrs:{label:"商品描述"}},[a("span",[s._v(s._s(t.row.desc))])])],1)]}}])}),a("el-table-column",{attrs:{label:"商品 ID",prop:"id"}}),a("el-table-column",{attrs:{label:"商品名称",prop:"name"}}),a("el-table-column",{attrs:{label:"描述",prop:"desc"}})],1)]],2),a("p",[s._v('通过设置 type="expand" 和 '),a("code",[s._v("Scoped slot")]),s._v(" 可以开启展开行功能，"),a("code",[s._v("el-table-column")]),s._v(" 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 "),a("code",[s._v("Scoped slot")]),s._v(" 相同。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"tableData5"')]),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("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-position")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inline")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-table-expand"')]),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('"商品名称"')]),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("{{ props.row.name }}"),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-form-item")]),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('"所属店铺"')]),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("{{ props.row.shop }}"),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-form-item")]),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('"商品 ID"')]),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("{{ props.row.id }}"),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-form-item")]),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('"店铺 ID"')]),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("{{ props.row.shopId }}"),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-form-item")]),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('"商品分类"')]),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("{{ props.row.category }}"),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-form-item")]),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('"店铺地址"')]),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("{{ props.row.address }}"),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-form-item")]),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('"商品描述"')]),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("{{ props.row.desc }}"),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-form-item")]),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(">")]),s._v("\n "),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-column")]),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('"商品 ID"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"商品名称"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"描述"')]),s._v("\n "),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-table-column")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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-table-expand")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".demo-table-expand")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("label")]),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("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".demo-table-expand")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-form-item")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50%")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("tableData5")]),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("'好滋好味鸡蛋仔'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("category")]),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 "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区真北路'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shop")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'王小虎夫妻店'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shopId")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'10333'")]),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("'好滋好味鸡蛋仔'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("category")]),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 "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区真北路'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shop")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'王小虎夫妻店'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shopId")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'10333'")]),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("'好滋好味鸡蛋仔'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("category")]),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 "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区真北路'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shop")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'王小虎夫妻店'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shopId")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'10333'")]),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("'好滋好味鸡蛋仔'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("category")]),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 "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区真北路'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shop")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'王小虎夫妻店'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shopId")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'10333'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(16),a("p",[s._v("若表格展示的是各类数字，可以在表尾显示各列的合计。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData6" border="" show-summary style="width: 100%">\n <el-table-column prop="id" label="ID" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名">\n </el-table-column>\n <el-table-column prop="amount1" sortable label="数值 1">\n </el-table-column>\n <el-table-column prop="amount2" sortable label="数值 2">\n </el-table-column>\n <el-table-column prop="amount3" sortable label="数值 3">\n </el-table-column>\n </el-table>\n \n <el-table :data="tableData6" border="" height="200" :summary-method="getSummaries" show-summary style="width: 100%; margin-top: 20px">\n <el-table-column prop="id" label="ID" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名">\n </el-table-column>\n <el-table-column prop="amount1" label="数值 1（元）">\n </el-table-column>\n <el-table-column prop="amount2" label="数值 2（元）">\n </el-table-column>\n <el-table-column prop="amount3" label="数值 3（元）">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData6: [{\n id: '12987122',\n name: '王小虎',\n amount1: '234',\n amount2: '3.2',\n amount3: 10\n }, {\n id: '12987123',\n name: '王小虎',\n amount1: '165',\n amount2: '4.43',\n amount3: 12\n }, {\n id: '12987124',\n name: '王小虎',\n amount1: '324',\n amount2: '1.9',\n amount3: 9\n }, {\n id: '12987125',\n name: '王小虎',\n amount1: '621',\n amount2: '2.2',\n amount3: 17\n }, {\n id: '12987126',\n name: '王小虎',\n amount1: '539',\n amount2: '4.1',\n amount3: 15\n }]\n };\n },\n methods: {\n getSummaries(param) {\n const { columns, data } = param;\n const sums = [];\n columns.forEach((column, index) => {\n if (index === 0) {\n sums[index] = '总价';\n return;\n }\n const values = data.map(item => Number(item[column.property]));\n if (!values.every(value => isNaN(value))) {\n sums[index] = values.reduce((prev, curr) => {\n const value = Number(curr);\n if (!isNaN(value)) {\n return prev + curr;\n } else {\n return prev;\n }\n }, 0);\n sums[index] += ' 元';\n } else {\n sums[index] = 'N/A';\n }\n });\n\n return sums;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名"}}),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 3"}})],1),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名"}}),a("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),a("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),a("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)]],2),a("p",[s._v("将"),a("code",[s._v("show-summary")]),s._v("设置为"),a("code",[s._v("true")]),s._v("就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过"),a("code",[s._v("sum-text")]),s._v("配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用"),a("code",[s._v("summary-method")]),s._v("并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),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(">")]),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('"数值 1"')]),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(">")]),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('"数值 2"')]),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(">")]),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('"数值 3"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),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(">")]),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('"数值 1（元）"')]),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(">")]),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('"数值 2（元）"')]),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(">")]),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('"数值 3（元）"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),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("'王小虎'")]),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("'王小虎'")]),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("'王小虎'")]),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("'王小虎'")]),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("'总价'")]),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] = 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 sums[index] += "),a("span",{attrs:{class:"hljs-string"}},[s._v("' 元'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(17),a("p",[s._v("多行或多列共用一个数据时，可以合并行或列。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div>\n <el-table :data="tableData6" :span-method="arraySpanMethod" border style="width: 100%">\n <el-table-column prop="id" label="ID" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名">\n </el-table-column>\n <el-table-column prop="amount1" sortable label="数值 1">\n </el-table-column>\n <el-table-column prop="amount2" sortable label="数值 2">\n </el-table-column>\n <el-table-column prop="amount3" sortable label="数值 3">\n </el-table-column>\n </el-table>\n\n <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">\n <el-table-column prop="id" label="ID" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名">\n </el-table-column>\n <el-table-column prop="amount1" label="数值 1（元）">\n </el-table-column>\n <el-table-column prop="amount2" label="数值 2（元）">\n </el-table-column>\n <el-table-column prop="amount3" label="数值 3（元）">\n </el-table-column>\n </el-table>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData6: [{\n id: '12987122',\n name: '王小虎',\n amount1: '234',\n amount2: '3.2',\n amount3: 10\n }, {\n id: '12987123',\n name: '王小虎',\n amount1: '165',\n amount2: '4.43',\n amount3: 12\n }, {\n id: '12987124',\n name: '王小虎',\n amount1: '324',\n amount2: '1.9',\n amount3: 9\n }, {\n id: '12987125',\n name: '王小虎',\n amount1: '621',\n amount2: '2.2',\n amount3: 17\n }, {\n id: '12987126',\n name: '王小虎',\n amount1: '539',\n amount2: '4.1',\n amount3: 15\n }]\n };\n },\n methods: {\n arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n if (rowIndex % 2 === 0) {\n if (columnIndex === 0) {\n return [1, 2];\n } else if (columnIndex === 1) {\n return [0, 0];\n }\n }\n },\n\n objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n if (columnIndex === 0) {\n if (rowIndex % 2 === 0) {\n return {\n rowspan: 2,\n colspan: 1\n };\n } else {\n return {\n rowspan: 0,\n colspan: 0\n };\n }\n }\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,"span-method":s.arraySpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名"}}),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 3"}})],1),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,"span-method":s.objectSpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名"}}),a("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),a("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),a("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)],1)]],2),a("p",[s._v("通过给"),a("code",[s._v("table")]),s._v("传入"),a("code",[s._v("span-method")]),s._v("方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行"),a("code",[s._v("row")]),s._v("、当前列"),a("code",[s._v("column")]),s._v("、当前行号"),a("code",[s._v("rowIndex")]),s._v("、当前列号"),a("code",[s._v("columnIndex")]),s._v("四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表"),a("code",[s._v("rowspan")]),s._v("，第二个元素代表"),a("code",[s._v("colspan")]),s._v("。 也可以返回一个键名为"),a("code",[s._v("rowspan")]),s._v("和"),a("code",[s._v("colspan")]),s._v("的对象。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),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(">")]),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('"数值 1"')]),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(">")]),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('"数值 2"')]),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(">")]),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('"数值 3"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"姓名"')]),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(">")]),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('"数值 1（元）"')]),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(">")]),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('"数值 2（元）"')]),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(">")]),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('"数值 3（元）"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),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("template")]),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("'王小虎'")]),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("'王小虎'")]),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("'王小虎'")]),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("'王小虎'")]),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("'王小虎'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(18),s._m(19),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" style="width: 100%">\n <el-table-column type="index" :index="indexMethod">\n </el-table-column>\n <el-table-column prop="date" label="日期" width="180">\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="180">\n </el-table-column>\n <el-table-column prop="address" label="地址">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333,\n tag: '家'\n }, {\n date: '2016-05-02',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333,\n tag: '公司'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333,\n tag: '家'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333,\n tag: '公司'\n }],\n }\n },\n methods: {\n indexMethod(index) {\n return index * 2;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{type:"index",index:s.indexMethod}}),a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("通过给 "),a("code",[s._v("type=index")]),s._v(" 的列传入 "),a("code",[s._v("index")]),s._v(" 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 "),a("code",[s._v("0")]),s._v(" 开始）作为参数，返回值将作为索引展示。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),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('"日期"')]),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("el-table-column")]),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('"姓名"')]),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("el-table-column")]),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('"地址"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'家'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'公司'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'家'")]),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("'王小虎'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200333")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),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 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table 表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-ban-ma-wen-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带斑马纹表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带边框表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-zhuang-tai-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-zhuang-tai-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带状态表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-lie"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定列")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-lie-he-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie-he-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定列和表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"liu-ti-gao-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#liu-ti-gao-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 流体高度")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-ji-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-ji-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多级表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"pai-xu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 排序")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shai-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shai-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 筛选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-lie-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义列模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhan-kai-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhan-kai-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 展开行")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"biao-wei-he-ji-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#biao-wei-he-ji-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 表尾合计行")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"he-bing-xing-huo-lie"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#he-bing-xing-huo-lie","aria-hidden":"true"}},[s._v("¶")]),s._v(" 合并行或列")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-suo-yin"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-suo-yin","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义索引")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("自定义 "),a("code",{pre:!0},[s._v("type=index")]),s._v(" 列的行号。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("显示的数据")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max-height")]),a("td",[s._v("Table 的最大高度")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("是否为斑马纹 table")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("是否带有纵向边框")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("Table 的尺寸")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("列的宽度是否自撑开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-header")]),a("td",[s._v("是否显示表头")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("highlight-current-row")]),a("td",[s._v("是否要高亮当前行")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-row-key")]),a("td",[s._v("当前行的 key，只写属性")]),a("td",[s._v("String,Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-class-name")]),a("td",[s._v("行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。")]),a("td",[s._v("Function({row, rowIndex})/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-style")]),a("td",[s._v("行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。")]),a("td",[s._v("Function({row, rowIndex})/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("cell-class-name")]),a("td",[s._v("单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。")]),a("td",[s._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("cell-style")]),a("td",[s._v("单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。")]),a("td",[s._v("Function({row, column, rowIndex, columnIndex})/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-row-class-name")]),a("td",[s._v("表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。")]),a("td",[s._v("Function({row, rowIndex})/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-row-style")]),a("td",[s._v("表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。")]),a("td",[s._v("Function({row, rowIndex})/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-cell-class-name")]),a("td",[s._v("表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。")]),a("td",[s._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-cell-style")]),a("td",[s._v("表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。")]),a("td",[s._v("Function({row, rowIndex, rowIndex, columnIndex})/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-key")]),a("td",[s._v("行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问："),a("code",{pre:!0},[s._v("user.info.id")]),s._v("，但不支持 "),a("code",{pre:!0},[s._v("user.info[0].id")]),s._v("，此种情况请使用 "),a("code",{pre:!0},[s._v("Function")]),s._v("。")]),a("td",[s._v("Function(row)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("空数据时显示的文本内容，也可以通过 "),a("code",{pre:!0},[s._v('slot="empty"')]),s._v(" 设置")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("暂无数据")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v('是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效')]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-row-keys")]),a("td",[s._v("可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td")]),a("tr",[a("td",[s._v("default-sort")]),a("td",[s._v("默认的排序列的prop和顺序。它的"),a("code",{pre:!0},[s._v("prop")]),s._v("属性指定默认的排序的列，"),a("code",{pre:!0},[s._v("order")]),s._v("指定默认排序的顺序")]),a("td",[s._v("Object")]),a("td",[a("code",{pre:!0},[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("如果只指定了"),a("code",{pre:!0},[s._v("prop")]),s._v(", 没有指定"),a("code",{pre:!0},[s._v("order")]),s._v(", 则默认顺序是ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",{pre:!0},[s._v("effect")]),s._v(" 属性")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td")]),a("tr",[a("td",[s._v("show-summary")]),a("td",[s._v("是否在表尾显示合计行")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sum-text")]),a("td",[s._v("合计行第一列的文本")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("合计")])]),a("tr",[a("td",[s._v("summary-method")]),a("td",[s._v("自定义的合计计算方法")]),a("td",[s._v("Function({ columns, data })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("span-method")]),a("td",[s._v("合并行或列的计算方法")]),a("td",[s._v("Function({ row, column, rowIndex, columnIndex })")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("当用户手动勾选数据行的 Checkbox 时触发的事件")]),a("td",[s._v("selection, row")])]),a("tr",[a("td",[s._v("select-all")]),a("td",[s._v("当用户手动勾选全选 Checkbox 时触发的事件")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("selection-change")]),a("td",[s._v("当选择项发生变化时会触发该事件")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("cell-mouse-enter")]),a("td",[s._v("当单元格 hover 进入时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-mouse-leave")]),a("td",[s._v("当单元格 hover 退出时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-click")]),a("td",[s._v("当某个单元格被点击时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-dblclick")]),a("td",[s._v("当某个单元格被双击击时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("row-click")]),a("td",[s._v("当某一行被点击时会触发该事件")]),a("td",[s._v("row, event, column")])]),a("tr",[a("td",[s._v("row-contextmenu")]),a("td",[s._v("当某一行被鼠标右键点击时会触发该事件")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("row-dblclick")]),a("td",[s._v("当某一行被双击时会触发该事件")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("header-click")]),a("td",[s._v("当某一列的表头被点击时会触发该事件")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("sort-change")]),a("td",[s._v("当表格的排序条件发生变化的时候会触发该事件")]),a("td",[s._v("{ column, prop, order }")])]),a("tr",[a("td",[s._v("filter-change")]),a("td",[s._v("当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。")]),a("td",[s._v("filters")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性")]),a("td",[s._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[s._v("header-dragend")]),a("td",[s._v("当拖动表头改变了列的宽度的时候会触发该事件")]),a("td",[s._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[s._v("expand-change")]),a("td",[s._v("当用户对某一行展开或者关闭的时候会触发该事件")]),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("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("clearSelection")]),a("td",[s._v("用于多选表格，清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("toggleRowSelection")]),a("td",[s._v("用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）")]),a("td",[s._v("row, selected")])]),a("tr",[a("td",[s._v("toggleRowExpansion")]),a("td",[s._v("用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）")]),a("td",[s._v("row, expanded")])]),a("tr",[a("td",[s._v("setCurrentRow")]),a("td",[s._v("用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。")]),a("td",[s._v("row")])]),a("tr",[a("td",[s._v("clearSort")]),a("td",[s._v("用于清空排序条件，数据会恢复成未排序的状态")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearFilter")]),a("td",[s._v("用于清空过滤条件，数据会恢复成未过滤的状态")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("doLayout")]),a("td",[s._v("对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法")]),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("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("append")]),a("td",[s._v("插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-column-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("对应列的类型。如果设置了 "),a("code",{pre:!0},[s._v("selection")]),s._v(" 则显示多选框；如果设置了 "),a("code",{pre:!0},[s._v("index")]),s._v(" 则显示该行的索引（从 1 开始计算）；如果设置了 "),a("code",{pre:!0},[s._v("expand")]),s._v(" 则显示为一个可展开的按钮")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("index")]),a("td",[s._v("如果设置了 "),a("code",{pre:!0},[s._v("type=index")]),s._v("，可以通过传递 "),a("code",{pre:!0},[s._v("index")]),s._v(" 属性来自定义索引")]),a("td",[s._v("string, Function(index)")]),a("td",[s._v("-")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("column-key")]),a("td",[s._v("column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("显示的标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prop")]),a("td",[s._v("对应列内容的字段名，也可以使用 property 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("对应列的宽度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min-width")]),a("td",[s._v("对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fixed")]),a("td",[s._v("列是否固定在左侧或者右侧，true 表示固定在左侧")]),a("td",[s._v("string, boolean")]),a("td",[s._v("true, left, right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-header")]),a("td",[s._v("列标题 Label 区域渲染使用的 Function")]),a("td",[s._v("Function(h, { column, $index })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sortable")]),a("td",[s._v("对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件")]),a("td",[s._v("boolean, string")]),a("td",[s._v("true, false, 'custom'")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sort-method")]),a("td",[s._v("对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致")]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sort-by")]),a("td",[s._v("指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推。")]),a("td",[s._v("String/Array/Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resizable")]),a("td",[s._v("对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("formatter")]),a("td",[s._v("用来格式化内容")]),a("td",[s._v("Function(row, column, cellValue)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-overflow-tooltip")]),a("td",[s._v("当内容过长被隐藏时显示 tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("header-align")]),a("td",[s._v("表头对齐方式，若不设置该项，则使用表格的对齐方式")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("class-name")]),a("td",[s._v("列的 className")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-class-name")]),a("td",[s._v("当前列标题的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("selectable")]),a("td",[s._v("仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选")]),a("td",[s._v("Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-selection")]),a("td",[s._v("仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filters")]),a("td",[s._v("数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。")]),a("td",[s._v("Array[{ text, value }]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-placement")]),a("td",[s._v("过滤弹出框的定位")]),a("td",[s._v("String")]),a("td",[s._v("与 Tooltip 的 "),a("code",{pre:!0},[s._v("placement")]),s._v(" 属性相同")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-multiple")]),a("td",[s._v("数据过滤的选项是否多选")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。")]),a("td",[s._v("Function(value, row)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filtered-value")]),a("td",[s._v("选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(947)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=a(948),n=a.n(l),e=a(949),r=a(0),v=r(n.a,e.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,n){if(a.name===s){var e=t[n+1]||t[n-1];e&&(l=e.name)}}),a.editableTabsValue=l,a.editableTabs=t.filter(function(t){return t.name!==s})}()},addTab:function(s){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(s){var t=this.editableTabs2,a=this.editableTabsValue2;a===s&&t.forEach(function(l,n){if(l.name===s){var e=t[n+1]||t[n-1];e&&(a=e.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}}},function(s,t,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("分隔内容上有关联但属于不同类别的数据集合。")]),s._m(1),a("p",[s._v("基础的、简洁的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-tabs v-model="activeName" @tab-click="handleClick">\n <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n </el-tabs>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n activeName: 'second'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[s._v("定时任务补偿")])],1)]],2),a("p",[s._v("Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 "),a("code",[s._v("value")]),s._v(" 属性来指定当前选中的标签页。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"用户管理"')]),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("用户管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"配置管理"')]),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("配置管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"角色管理"')]),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("角色管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"定时任务补偿"')]),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("定时任务补偿"),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("el-tabs")]),s._v(">")]),s._v("\n"),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("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("'second'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("选项卡样式的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">\n <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n </el-tabs>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n activeName2: 'first'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick},model:{value:s.activeName2,callback:function(t){s.activeName2=t},expression:"activeName2"}},[a("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[s._v("定时任务补偿")])],1)]],2),a("p",[s._v("只需要设置 "),a("code",[s._v("type")]),s._v(" 属性为 "),a("code",[s._v("card")]),s._v(" 就可以使选项卡改变为标签风格。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"activeName2"')]),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('"用户管理"')]),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("用户管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"配置管理"')]),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("配置管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"角色管理"')]),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("角色管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"定时任务补偿"')]),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("定时任务补偿"),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("el-tabs")]),s._v(">")]),s._v("\n"),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("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("activeName2")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("卡片化的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"用户管理"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿"}},[s._v("定时任务补偿")])],1)],1),a("p",[s._v("将"),a("code",[s._v("type")]),s._v("设置为"),a("code",[s._v("border-card")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"用户管理"')]),s._v(">")]),s._v("用户管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"配置管理"')]),s._v(">")]),s._v("配置管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),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("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n <el-radio-button label="top">top</el-radio-button>\n <el-radio-button label="right">right</el-radio-button>\n <el-radio-button label="bottom">bottom</el-radio-button>\n <el-radio-button label="left">left</el-radio-button>\n </el-radio-group>\n\n <el-tabs :tab-position="tabPosition" style="height: 200px;">\n <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n </el-tabs>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n tabPosition: 'top'\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:s.tabPosition,callback:function(t){s.tabPosition=t},expression:"tabPosition"}},[a("el-radio-button",{attrs:{label:"top"}},[s._v("top")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("right")]),a("el-radio-button",{attrs:{label:"bottom"}},[s._v("bottom")]),a("el-radio-button",{attrs:{label:"left"}},[s._v("left")])],1),a("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":s.tabPosition}},[a("el-tab-pane",{attrs:{label:"用户管理"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿"}},[s._v("定时任务补偿")])],1)]],2),a("p",[s._v("标签一共有四个方向的设置 "),a("code",[s._v('tabPosition="left|right|top|bottom"')])]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),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(">")]),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('"用户管理"')]),s._v(">")]),s._v("用户管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"配置管理"')]),s._v(">")]),s._v("配置管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),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("el-tabs")]),s._v(">")]),s._v("\n"),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n <el-tab-pane>\n <span slot="label"><i class="el-icon-date"></i> 我的行程</span>\n 我的行程\n </el-tab-pane>\n <el-tab-pane label="消息中心">消息中心</el-tab-pane>\n <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{attrs:{slot:"label"},slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" 我的行程")]),s._v("\n 我的行程\n ")]),a("el-tab-pane",{attrs:{label:"消息中心"}},[s._v("消息中心")]),a("el-tab-pane",{attrs:{label:"角色管理"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿"}},[s._v("定时任务补偿")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v(" 我的行程"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n 我的行程\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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"消息中心"')]),s._v(">")]),s._v("消息中心"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),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("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),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("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("增减标签页按钮只能在选项卡样式的标签页下使用")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">\n <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name">\n {{item.content}}\n </el-tab-pane>\n</el-tabs>\n\n',script:"\n export default {\n data() {\n return {\n editableTabsValue: '2',\n editableTabs: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n handleTabsEdit(targetName, action) {\n if (action === 'add') {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue = newTabName;\n }\n if (action === 'remove') {\n let tabs = this.editableTabs;\n let activeName = this.editableTabsValue;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue = activeName;\n this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",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(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),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(":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("</"),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("el-tabs")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div style="margin-bottom: 20px;">\n <el-button size="small" @click="addTab(editableTabsValue2)">\n add tab\n </el-button>\n</div>\n<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">\n <el-tab-pane v-for="(item, index) in editableTabs2" :key="item.name" :label="item.title" :name="item.name">\n {{item.content}}\n </el-tab-pane>\n</el-tabs>\n\n',script:"\n export default {\n data() {\n return {\n editableTabsValue2: '2',\n editableTabs2: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n addTab(targetName) {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs2.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n let tabs = this.editableTabs2;\n let activeName = this.editableTabsValue2;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue2 = activeName;\n this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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-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("</"),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("el-tabs")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs 标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-xiang-qia-yang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选项卡样式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qia-pian-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 卡片化")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"wei-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wei-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 位置")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("可以通过 "),a("code",{pre:!0},[s._v("tab-position")]),s._v(" 设置标签的位置")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("可以通过具名 "),a("code",{pre:!0},[s._v("slot")]),s._v(" 来实现自定义标签页的内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-zeng-jian-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态增减标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义增加标签页触发器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("风格类型")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("标签是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("标签是否可增加")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("标签是否同时可增加和关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值，选中选项卡的 name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("第一个选项卡的 name")])]),a("tr",[a("td",[s._v("tab-position")]),a("td",[s._v("选项卡所在位置")]),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("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("tab 被选中时触发")]),a("td",[s._v("被选中的标签 tab 实例")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("点击 tab 移除按钮后触发")]),a("td",[s._v("被删除的标签的 name")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("点击 tabs 的新增按钮后触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("点击 tabs 的新增按钮或 tab 被关闭后触发")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("选项卡标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("与选项卡 activeName 对应的标识符，表示选项卡别名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("标签是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(951)},function(s,t,a){"use strict";function l(s){a(952)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(954),e=a.n(n),r=a(955),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(953);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("3d012440",l,!0)},function(s,t,a){t=s.exports=a(109)(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:"标签一",type:""},{name:"标签二",type:"success"},{name:"标签三",type:"info"},{name:"标签四",type:"warning"},{name:"标签五",type:"danger"}],dynamicTags:["标签一","标签二","标签三"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},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("用于标记和选择。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag>标签一</el-tag>\n<el-tag type="success">标签二</el-tag>\n<el-tag type="info">标签三</el-tag>\n<el-tag type="warning">标签四</el-tag>\n<el-tag type="danger">标签五</el-tag>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tag",[s._v("标签一")]),a("el-tag",{attrs:{type:"success"}},[s._v("标签二")]),a("el-tag",{attrs:{type:"info"}},[s._v("标签三")]),a("el-tag",{attrs:{type:"warning"}},[s._v("标签四")]),a("el-tag",{attrs:{type:"danger"}},[s._v("标签五")])],1),a("p",[s._v("由"),a("code",[s._v("type")]),s._v("属性来选择tag的类型，也可以通过"),a("code",[s._v("color")]),s._v("属性来自定义背景色。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("标签一"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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("标签二"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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("标签三"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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("标签四"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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("标签五"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">\n {{tag.name}}\n</el-tag>\n\n\n',script:"\n export default {\n data() {\n return {\n tags: [\n { name: '标签一', type: '' },\n { name: '标签二', type: 'success' },\n { name: '标签三', type: 'info' },\n { name: '标签四', type: 'warning' },\n { name: '标签五', type: 'danger' }\n ]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},s._l(s.tags,function(t){return a("el-tag",{key:t.name,attrs:{closable:"",type:t.type}},[s._v("\n "+s._s(t.name)+"\n")])})),a("p",[s._v("设置"),a("code",[s._v("closable")]),s._v("属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置"),a("code",[s._v("disable-transitions")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，true 为关闭。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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("'标签一'")]),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("'标签二'")]),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("'标签三'")]),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("'标签四'")]),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("'标签五'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">\n {{tag}}\n</el-tag>\n<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n dynamicTags: ['标签一', '标签二', '标签三'],\n inputVisible: false,\n inputValue: ''\n };\n },\n methods: {\n handleClose(tag) {\n this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n },\n\n showInput() {\n this.inputVisible = true;\n this.$nextTick(_ => {\n this.$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n let inputValue = this.inputValue;\n if (inputValue) {\n this.dynamicTags.push(inputValue);\n }\n this.inputVisible = false;\n this.inputValue = '';\n }\n }\n }\n",style:"\n .el-tag + .el-tag {\n margin-left: 10px;\n }\n .button-new-tag {\n margin-left: 10px;\n height: 32px;\n line-height: 30px;\n padding-top: 0;\n padding-bottom: 0;\n }\n .input-new-tag {\n width: 90px;\n margin-left: 10px;\n vertical-align: bottom;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n "+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"small"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(t){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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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('"small"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("'标签一'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'标签二'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'标签三'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag closable>默认标签</el-tag>\n<el-tag size="medium" closable>中等标签</el-tag>\n<el-tag size="small" closable>小型标签</el-tag>\n<el-tag size="mini" closable>超小标签</el-tag>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tag",{attrs:{closable:""}},[s._v("默认标签")]),a("el-tag",{attrs:{size:"medium",closable:""}},[s._v("中等标签")]),a("el-tag",{attrs:{size:"small",closable:""}},[s._v("小型标签")]),a("el-tag",{attrs:{size:"mini",closable:""}},[s._v("超小标签")])],1),a("p",[s._v("额外的尺寸："),a("code",[s._v("medium")]),s._v("、"),a("code",[s._v("small")]),s._v("、"),a("code",[s._v("mini")]),s._v("，通过设置"),a("code",[s._v("size")]),s._v("属性来配置它们。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(">")]),s._v("默认标签"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(">")]),s._v("中等标签"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(">")]),s._v("小型标签"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-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(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(">")]),s._v("超小标签"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag 标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可移除标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-bian-ji-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-bian-ji-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态编辑标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("动态编辑标签可以通过点击标签关闭按钮后触发的 "),a("code",{pre:!0},[s._v("close")]),s._v(" 事件来实现")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-tong-chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 不同尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disable-transitions")]),a("td",[s._v("是否禁用渐变动画")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("是否有边框描边")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("尺寸")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭 Tag 时触发的事件")]),a("td",[s._v("—")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(957)},function(s,t,a){"use strict";function l(s){a(958)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(960),e=a.n(n),r=a(961),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(959);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("679ff378",l,!0)},function(s,t,a){t=s.exports=a(109)(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("用于选择或输入日期")]),s._m(1),a("p",[s._v("提供几个固定的时间点供用户选择")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<el-time-select v-model=\"value1\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\" placeholder=\"选择时间\">\n</el-time-select>\n\n\n",script:"\n export default {\n data() {\n return {\n value1: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"选择时间"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("p",[s._v("使用 el-time-select 标签，分别通过"),a("code",[s._v("star")]),s._v("、"),a("code",[s._v("end")]),s._v("和"),a("code",[s._v("step")]),s._v("指定可选的起始时间、结束时间和步长")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"选择时间"')]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可以选择任意时间")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-time-picker v-model="value2" :picker-options="{\n selectableRange: \'18:30:00 - 20:30:00\'\n }" placeholder="任意时间点">\n </el-time-picker>\n <el-time-picker arrow-control="" v-model="value3" :picker-options="{\n selectableRange: \'18:30:00 - 20:30:00\'\n }" placeholder="任意时间点">\n </el-time-picker>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value2: new Date(2016, 9, 10, 18, 40),\n value3: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}}),a("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})]],2),a("p",[s._v("使用 el-time-picker 标签，通过"),a("code",[s._v("selectableRange")]),s._v("限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开"),a("code",[s._v("arrow-control")]),s._v("属性则通过界面上的箭头进行选择。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"任意时间点"')]),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(">")]),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('"任意时间点"')]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("若先选择开始时间，则结束时间内备选项的状态会随之改变")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<template>\n <el-time-select placeholder=\"起始时间\" v-model=\"startTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\">\n </el-time-select>\n <el-time-select placeholder=\"结束时间\" v-model=\"endTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\">\n </el-time-select>\n</template>\n\n\n",script:"\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-time-select",{attrs:{placeholder:"起始时间","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(t){s.startTime=t},expression:"startTime"}}),a("el-time-select",{attrs:{placeholder:"结束时间","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(t){s.endTime=t},expression:"endTime"}})]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"起始时间"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-select")]),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('"结束时间"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可选择任意的时间范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-time-picker is-range v-model="value4" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">\n </el-time-picker>\n <el-time-picker is-range="" arrow-control v-model="value5" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">\n </el-time-picker>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-time-picker",{attrs:{"is-range":"","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}}),a("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})]],2),a("p",[s._v("添加"),a("code",[s._v("is-range")]),s._v("属性即可选择时间范围，同样支持"),a("code",[s._v("arrow-control")]),s._v("属性。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"至"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"开始时间"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"结束时间"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),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-time-picker")]),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('"至"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"开始时间"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"结束时间"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),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-time-picker")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker-shi-jian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker 时间选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ren-yi-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 任意时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ren-yi-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 任意时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("非范围选择时的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("范围选择时开始日期的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("范围选择时开始日期的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-range")]),a("td",[s._v("是否为时间范围选择，仅对"),a("code",{pre:!0},[s._v("<el-time-picker>")]),s._v("有效")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("arrow-control")]),a("td",[s._v("是否使用箭头进行时间选择，仅对"),a("code",{pre:!0},[s._v("<el-time-picker>")]),s._v("有效")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("date(TimePicker) / string(TimeSelect)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left / center / right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("TimePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("选择范围时的分隔符")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("value-format")]),a("td",[s._v("可选，仅TimePicker时可用，绑定值的格式，同DatePicker")]),a("td",[s._v("string")]),a("td",[s._v("小时 "),a("code",{pre:!0},[s._v("HH")]),s._v("，分 "),a("code",{pre:!0},[s._v("mm")]),s._v("，秒 "),a("code",{pre:!0},[s._v("ss")]),s._v("，AM/PM "),a("code",{pre:!0},[s._v("A")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("可选，选择器打开时默认显示的时间")]),a("td",[s._v("Date(TimePicker) / string(TimeSelect)")]),a("td",[s._v("可被"),a("code",{pre:!0},[s._v("new Date()")]),s._v("解析(TimePicker) / 可选值(TimeSelect)")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("开始时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("结束时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("间隔时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("最小时间，小于该时间的时间段将被禁用")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("最大时间，大于该时间的时间段将被禁用")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("可选时间段，例如"),a("code",{pre:!0},[s._v("'18:30:00 - 20:30:00'")]),s._v("或者传入数组"),a("code",{pre:!0},[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string / array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("时间格式化(TimePicker)")]),a("td",[s._v("string")]),a("td",[s._v("小时："),a("code",{pre:!0},[s._v("HH")]),s._v("，分："),a("code",{pre:!0},[s._v("mm")]),s._v("，秒："),a("code",{pre:!0},[s._v("ss")]),s._v("，AM/PM "),a("code",{pre:!0},[s._v("A")])]),a("td",[s._v("'HH:mm:ss'")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("用户确认选定的值时触发")]),a("td",[s._v("组件绑定值")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("当 input 失去焦点时触发")]),a("td",[s._v("组件实例")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("当 input 获得焦点时触发")]),a("td",[s._v("组件实例")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("使 input 获取焦点")]),a("td",[s._v("-")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(963)},function(s,t,a){"use strict";function l(s){a(964)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(966),e=a.n(n),r=a(967),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(965);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("b1694a86",l,!0)},function(s,t,a){t=s.exports=a(109)(void 0),t.push([s.i,".demo-tooltip .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip .box{width:400px}.demo-tooltip .box .top{text-align:center}.demo-tooltip .box .left{float:left;width:60px}.demo-tooltip .box .right{float:right;width:60px}.demo-tooltip .box .bottom{clear:both;text-align:center}.demo-tooltip .box .item{margin:4px}.demo-tooltip .box .left .el-tooltip__popper,.demo-tooltip .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip .box .el-tooltip{margin-left:0}",""])},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("常用于展示鼠标 hover 时的提示信息。")]),s._m(1),a("p",[s._v("在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="box">\n <div class="top">\n <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">\n <el-button>上左</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">\n <el-button>上边</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">\n <el-button>上右</el-button>\n </el-tooltip>\n </div>\n <div class="left">\n <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">\n <el-button>左上</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">\n <el-button>左边</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">\n <el-button>左下</el-button>\n </el-tooltip>\n </div>\n\n <div class="right">\n <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">\n <el-button>右上</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">\n <el-button>右边</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">\n <el-button>右下</el-button>\n </el-tooltip>\n </div>\n <div class="bottom">\n <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">\n <el-button>下左</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">\n <el-button>下边</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">\n <el-button>下右</el-button>\n </el-tooltip>\n </div>\n</div>\n\n\n',script:null,style:"\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 60px;\n }\n\n .right {\n float: right;\n width: 60px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left 提示文字",placement:"top-start"}},[a("el-button",[s._v("上左")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center 提示文字",placement:"top"}},[a("el-button",[s._v("上边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right 提示文字",placement:"top-end"}},[a("el-button",[s._v("上右")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top 提示文字",placement:"left-start"}},[a("el-button",[s._v("左上")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center 提示文字",placement:"left"}},[a("el-button",[s._v("左边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom 提示文字",placement:"left-end"}},[a("el-button",[s._v("左下")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top 提示文字",placement:"right-start"}},[a("el-button",[s._v("右上")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center 提示文字",placement:"right"}},[a("el-button",[s._v("右边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom 提示文字",placement:"right-end"}},[a("el-button",[s._v("右下")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left 提示文字",placement:"bottom-start"}},[a("el-button",[s._v("下左")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center 提示文字",placement:"bottom"}},[a("el-button",[s._v("下边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right 提示文字",placement:"bottom-end"}},[a("el-button",[s._v("下右")])],1)],1)])]),a("p",[s._v("使用"),a("code",[s._v("content")]),s._v("属性来决定"),a("code",[s._v("hover")]),s._v("时的提示信息。由"),a("code",[s._v("placement")]),s._v("属性决定展示效果："),a("code",[s._v("placement")]),s._v("属性值为："),a("code",[s._v("方向-对齐位置")]),s._v("；四个方向："),a("code",[s._v("top")]),s._v("、"),a("code",[s._v("left")]),s._v("、"),a("code",[s._v("right")]),s._v("、"),a("code",[s._v("bottom")]),s._v("；三种对齐位置："),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v("，默认为空。如"),a("code",[s._v('placement="left-end"')]),s._v("，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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 提示文字"')]),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("上左"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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 提示文字"')]),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("上边"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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 提示文字"')]),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("上右"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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("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 提示文字"')]),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("左上"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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 提示文字"')]),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("左边"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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 提示文字"')]),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("左下"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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\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 提示文字"')]),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("右上"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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 提示文字"')]),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("右边"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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 提示文字"')]),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("右下"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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("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 提示文字"')]),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("下左"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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 提示文字"')]),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("下边"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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 提示文字"')]),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("下右"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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("div")]),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: 60px;\n }\n\n .right {\n float: right;\n width: 60px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip content="Top center" placement="top">\n <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n <el-button>Light</el-button>\n</el-tooltip>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("通过设置"),a("code",[s._v("effect")]),s._v("属性来改变主题，默认为"),a("code",[s._v("dark")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("展示多行文本或者是设置文本内容的格式")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip placement="top">\n <div slot="content">多行信息<br>第二行信息</div>\n <el-button>Top center</el-button>\n</el-tooltip>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{attrs:{slot:"content"},slot:"content"},[s._v("多行信息"),a("br"),s._v("第二行信息")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("用具名 slot 分发"),a("code",[s._v("content")]),s._v("，替代"),a("code",[s._v("tooltip")]),s._v("中的"),a("code",[s._v("content")]),s._v("属性。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("多行信息"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("br")]),s._v("/>")]),s._v("第二行信息"),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("Top center"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：")]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">\n <el-button @click="disabled = !disabled">点击{{disabled ? \'开启\' : \'关闭\'}} tooltip 功能</el-button>\n </el-tooltip>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"点击关闭 tooltip 功能",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("点击"+s._s(s.disabled?"开启":"关闭")+" tooltip 功能")])],1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"点击关闭 tooltip 功能"')]),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("点击{{disabled ? '开启' : '关闭'}} tooltip 功能"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip-wen-zi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip 文字提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 主题")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip 组件提供了两个不同的主题："),a("code",{pre:!0},[s._v("dark")]),s._v("和"),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:"geng-duo-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" 更多 Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 高级扩展")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("transition")]),s._v(" 属性可以定制显隐的动画效果，默认为"),a("code",{pre:!0},[s._v("fade-in-linear")]),s._v("。\n如果需要关闭 "),a("code",{pre:!0},[s._v("tooltip")]),s._v(" 功能，"),a("code",{pre:!0},[s._v("disabled")]),s._v(" 属性可以满足这个需求，它接受一个"),a("code",{pre:!0},[s._v("Boolean")]),s._v("，设置为"),a("code",{pre:!0},[s._v("true")]),s._v("即可。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("事实上，这是基于 "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。\n当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("tooltip 内不支持 "),a("code",{pre:!0},[s._v("router-link")]),s._v(" 组件，请使用 "),a("code",{pre:!0},[s._v("vm.$router.push")]),s._v(" 代替。")]),a("p",[s._v("tooltip 内不支持 disabled form 元素，参考"),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v("，请在 disabled form 元素外层添加一层包裹元素。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("默认提供的主题")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("显示的内容，也可以通过 "),a("code",{pre:!0},[s._v("slot#content")]),s._v(" 传入 DOM")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("Tooltip 的出现位置")]),a("td",[s._v("String")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("状态是否可见")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("Tooltip 是否可用")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("出现位置的偏移量")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("定义渐变动画")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("是否显示 Tooltip 箭头，更多参数可见"),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 的参数")]),a("td",[s._v("Object")]),a("td",[s._v("参考 "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 文档")]),a("td",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("延迟出现，单位毫秒")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("为 Tooltip 的 popper 添加类名")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("鼠标是否可进入到 tooltip 中")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("hide-after")]),a("td",[s._v("Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(969)},function(s,t,a){"use strict";function l(s){a(970)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(972),e=a.n(n),r=a(973),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(971);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("7d2dd17b",l,!0)},function(s,t,a){t=s.exports=a(109)(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:"备选项 "+a,disabled:a%4==0});return t}(),data2:function(s){var t=[],a=["shanghai","beijing","guangzhou","shenzhen","nanjing","xian","chengdu"];return["上海","北京","广州","深圳","南京","西安","成都"].forEach(function(s,l){t.push({label:s,key:l,pinyin:a[l]})}),t}(),data3:function(s){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"备选项 "+a,disabled:a%4==0});return t}(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,t){return t.pinyin.indexOf(s)>-1},renderFunc:function(s,t){return s("span",null,[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}}},function(s,t,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:'<template>\n <el-transfer v-model="value1" :data="data"></el-transfer>\n</template>\n\n\n',script:"\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `备选项 ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value1: [1, 4]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})]],2),a("p",[s._v("Transfer 的数据通过 "),a("code",[s._v("data")]),s._v(" 属性传入。数据需要是一个对象数组，每个对象有以下属性："),a("code",[s._v("key")]),s._v(" 为数据的唯一性标识，"),a("code",[s._v("label")]),s._v(" 为显示文本，"),a("code",[s._v("disabled")]),s._v(" 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 "),a("code",[s._v("v-model")]),s._v(" 的变量，值为数据项的 "),a("code",[s._v("key")]),s._v(" 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 "),a("code",[s._v("v-model")]),s._v(" 绑定的变量赋予一个初始值。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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(" "),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-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("`备选项 "),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("在数据很多的情况下，可以对数据进行搜索和过滤。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-transfer filterable :filter-method="filterMethod" filter-placeholder="请输入城市拼音" v-model="value2" :data="data2">\n </el-transfer>\n</template>\n\n\n',script:"\n export default {\n data() {\n const generateData2 = _ => {\n const data = [];\n const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];\n const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];\n cities.forEach((city, index) => {\n data.push({\n label: city,\n key: index,\n pinyin: pinyin[index]\n });\n });\n return data;\n };\n return {\n data2: generateData2(),\n value2: [],\n filterMethod(query, item) {\n return item.pinyin.indexOf(query) > -1;\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-transfer",{attrs:{filterable:"","filter-method":s.filterMethod,"filter-placeholder":"请输入城市拼音",data:s.data2},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("设置 "),a("code",[s._v("filterable")]),s._v(" 为 "),a("code",[s._v("true")]),s._v(" 即可开启搜索模式。默认情况下，若数据项的 "),a("code",[s._v("label")]),s._v(" 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 "),a("code",[s._v("filter-method")]),s._v(" 定义自己的搜索逻辑。"),a("code",[s._v("filter-method")]),s._v(" 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 "),a("code",[s._v("true")]),s._v("，则会在搜索结果中显示对应的数据项。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"请输入城市拼音"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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(" cities = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'广州'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'深圳'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'南京'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'西安'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'成都'")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" pinyin = ["),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(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'nanjing'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'xian'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'chengdu'")]),s._v("];\n cities.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("pinyin")]),s._v(": pinyin[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.pinyin.indexOf(query) > "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n }\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-transfer v-model="value3" filterable="" :left-default-checked="[2, 3]" :right-default-checked="[1]" :render-content="renderFunc" :titles="[\'Source\', \'Target\']" :button-texts="[\'到左边\', \'到右边\']" :format="{\n noChecked: \'${total}\',\n hasChecked: \'${checked}/${total}\'\n }" @change="handleChange" :data="data">\n <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>\n <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>\n </el-transfer>\n</template>\n\n\n\n\n',script:"\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `备选项 ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value3: [1],\n renderFunc(h, option) {\n return <span>{ option.key } - { option.label }</span>;\n }\n };\n },\n\n methods: {\n handleChange(value, direction, movedKeys) {\n console.log(value, direction, movedKeys);\n }\n }\n };\n",style:"\n .transfer-footer {\n margin-left: 20px;\n padding: 6px 5px;\n }\n"}}},[a("div",{staticClass:"source",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":["到左边","到右边"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[s._v("操作")]),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[s._v("操作")])],1)]],2),a("p",[s._v("可以使用 "),a("code",[s._v("titles")]),s._v("、"),a("code",[s._v("button-texts")]),s._v("、"),a("code",[s._v("render-content")]),s._v(" 和 "),a("code",[s._v("format")]),s._v(" 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。对于列表底部的内容区，提供了两个具名 slot："),a("code",[s._v("left-footer")]),s._v(" 和 "),a("code",[s._v("right-footer")]),s._v("。此外，如果希望某些数据项在初始化时就被勾选，可以使用 "),a("code",[s._v("left-default-checked")]),s._v(" 和 "),a("code",[s._v("right-default-checked")]),s._v(" 属性。最后，本例还展示了 "),a("code",[s._v("change")]),s._v(" 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")]),a("div",{staticClass:"highlight",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("\"['到左边', '到右边']\"")]),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("操作"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("操作"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("`备选项 "),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-transfer v-model="value4" :props="{\n key: \'value\',\n label: \'desc\'\n }" :data="data3">\n </el-transfer>\n</template>\n\n\n',script:"\n export default {\n data() {\n const generateData3 = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n value: i,\n desc: `备选项 ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data3: generateData3(),\n value4: []\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",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("本例中的数据源没有 "),a("code",[s._v("key")]),s._v(" 和 "),a("code",[s._v("label")]),s._v(" 字段，在功能上与它们相同的字段名为 "),a("code",[s._v("value")]),s._v(" 和 "),a("code",[s._v("desc")]),s._v("。因此可以使用"),a("code",[s._v("props")]),s._v(" 属性为 "),a("code",[s._v("key")]),s._v(" 和 "),a("code",[s._v("label")]),s._v(" 设置别名。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("`备选项 "),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"transfer-chuan-suo-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer-chuan-suo-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer 穿梭框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-zi-ding-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-ding-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可自定义")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-ju-xiang-shu-xing-bie-ming"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-ju-xiang-shu-xing-bie-ming","aria-hidden":"true"}},[s._v("¶")]),s._v(" 数据项属性别名")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("默认情况下，Transfer 仅能识别数据项中的 "),a("code",{pre:!0},[s._v("key")]),s._v("、"),a("code",{pre:!0},[s._v("label")]),s._v(" 和 "),a("code",{pre:!0},[s._v("disabled")]),s._v(" 字段。如果你的数据的字段名不同，可以使用 "),a("code",{pre:!0},[s._v("props")]),s._v(" 属性为它们设置别名。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("Transfer 的数据源")]),a("td",[s._v("array[{ key, label, disabled }]")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("是否可搜索")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-placeholder")]),a("td",[s._v("搜索框占位符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("请输入搜索内容")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("自定义搜索方法")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("titles")]),a("td",[s._v("自定义列表标题")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['列表 1', '列表 2']")])]),a("tr",[a("td",[s._v("button-texts")]),a("td",[s._v("自定义按钮文案")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("自定义数据项渲染函数")]),a("td",[s._v("function(h, option)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("列表顶部勾选状态文案")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("数据源的字段别名")]),a("td",[s._v("object{key, label, disabled}")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("left-default-checked")]),a("td",[s._v("初始状态下左侧列表的已勾选项的 key 数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("right-default-checked")]),a("td",[s._v("初始状态下右侧列表的已勾选项的 key 数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("left-footer")]),a("td",[s._v("左侧列表底部的内容")])]),a("tr",[a("td",[s._v("right-footer")]),a("td",[s._v("右侧列表底部的内容")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("右侧列表元素变化时触发")]),a("td",[s._v("当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(975)},function(s,t,a){"use strict";function l(s){a(976)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(978),e=a.n(n),r=a(979),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(977);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("78af660d",l,!0)},function(s,t,a){t=s.exports=a(109)(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:'<template>\n <div>\n <el-button @click="show = !show">Click Me</el-button>\n\n <div style="display: flex; margin-top: 20px; height: 100px;">\n <transition name="el-fade-in-linear">\n <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n </transition>\n <transition name="el-fade-in">\n <div v-show="show" class="transition-box">.el-fade-in</div>\n </transition>\n </div>\n </div>\n</template>\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show=!s.show}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),a("p",[s._v("提供 "),a("code",[s._v("el-fade-in-linear")]),s._v(" 和 "),a("code",[s._v("el-fade-in")]),s._v(" 两种效果。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("</"),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("transition")]),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("</"),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("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(">")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div>\n <el-button @click="show2 = !show2">Click Me</el-button>\n\n <div style="display: flex; margin-top: 20px; height: 100px;">\n <transition name="el-zoom-in-center">\n <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n </transition>\n\n <transition name="el-zoom-in-top">\n <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n </transition>\n\n <transition name="el-zoom-in-bottom">\n <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n </transition>\n </div>\n </div>\n</template>\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show2: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show2=!s.show2}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),a("p",[s._v("提供 "),a("code",[s._v("el-zoom-in-center")]),s._v("，"),a("code",[s._v("el-zoom-in-top")]),s._v(" 和 "),a("code",[s._v("el-zoom-in-bottom")]),s._v(" 三种效果。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("</"),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("transition")]),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("</"),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("transition")]),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("</"),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("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(">")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div>\n <el-button @click="show3 = !show3">Click Me</el-button>\n\n <div style="margin-top: 20px; height: 200px;">\n <el-collapse-transition>\n <div v-show="show3">\n <div class="transition-box">el-collapse-transition</div>\n <div class="transition-box">el-collapse-transition</div>\n </div>\n </el-collapse-transition>\n </div>\n </div>\n</template>\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show3: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("</"),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("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("</"),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("div")]),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(">")]),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("template")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"nei-zhi-guo-du-dong-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nei-zhi-guo-du-dong-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 内置过渡动画")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 "),a("a",{attrs:{href:"https://cn.vuejs.org/v2/api/#transition"}},[s._v("transition 组件文档")]),s._v(" 。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fade-dan-ru-dan-chu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade-dan-ru-dan-chu","aria-hidden":"true"}},[s._v("¶")]),s._v(" fade 淡入淡出")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zoom-suo-fang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom-suo-fang","aria-hidden":"true"}},[s._v("¶")]),s._v(" zoom 缩放")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-zhan-kai-zhe-die"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhan-kai-zhe-die","aria-hidden":"true"}},[s._v("¶")]),s._v(" collapse 展开折叠")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",{pre:!0},[s._v("el-collapse-transition")]),s._v(" 组件实现折叠展开效果。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-xu-yin-ru"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[s._v("¶")]),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-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")])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(981)},function(s,t,a){"use strict";function l(s){a(982)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(984),e=a.n(n),r=a(985),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(983);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("4061fa62",l,!0)},function(s,t,a){t=s.exports=a(109)(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}",""])},function(s,t,a){"use strict";t.__esModule=!0;var l=[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],n=[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],e=[{id:1,label:"一级 2",children:[{id:3,label:"二级 2-1",children:[{id:4,label:"三级 3-1-1"},{id:5,label:"三级 3-1-2",disabled:!0}]},{id:2,label:"二级 2-2",disabled:!0,children:[{id:6,label:"三级 3-2-1"},{id:7,label:"三级 3-2-2",disabled:!0}]}]}],r=1e3,v=[{name:"region1"},{name:"region2"}],_=1,c={label:"name",children:"zones"},i={label:"name",children:"zones",isLeaf:"leaf"},p={children:"children",label:"label"};t.default={watch:{filterText:function(s){this.$refs.tree2.filter(s)}},methods:{handleCheckChange:function(s,t,a){console.log(s,t,a)},handleNodeClick:function(s){console.log(s)},loadNode:function(s,t){if(0===s.level)return t([{name:"region1"},{name:"region2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s;s=a?[{name:"zone"+_++},{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:"二级 2-1"},{id:9,label:"三级 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])},append:function(s){var t={id: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,n=l.findIndex(function(s){return s.id===t.id});l.splice(n,1)},renderContent:function(s,t){var a=this,l=t.node,n=t.data;return s("span",{style:"flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;"},[s("span",null,[s("span",null,[l.label])]),s("span",null,[s("el-button",{style:"font-size: 12px;",attrs:{type:"text"},on:{click:function(){return a.append(n)}}},["Append"]),s("el-button",{style:"font-size: 12px;",attrs:{type:"text"},on:{click:function(){return a.remove(l,n)}}},["Delete"])])])},filterNode:function(s,t){return!s||-1!==t.label.indexOf(s)}},data:function(){return{data:l,data2:n,data3:e,data4:JSON.parse(JSON.stringify(n)),regions:v,defaultProps:p,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("用清晰的层级结构展示信息，可展开或折叠。")]),s._m(1),a("p",[s._v("基础的树形结构展示。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>\n\n\n',script:"\n export default {\n data() {\n return {\n data: [{\n label: '一级 1',\n children: [{\n label: '二级 1-1',\n children: [{\n label: '三级 1-1-1'\n }]\n }]\n }, {\n label: '一级 2',\n children: [{\n label: '二级 2-1',\n children: [{\n label: '三级 2-1-1'\n }]\n }, {\n label: '二级 2-2',\n children: [{\n label: '三级 2-2-1'\n }]\n }]\n }, {\n label: '一级 3',\n children: [{\n label: '二级 3-1',\n children: [{\n label: '三级 3-1-1'\n }]\n }, {\n label: '二级 3-2',\n children: [{\n label: '三级 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),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("'一级 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("'二级 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("'三级 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("'一级 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("'二级 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("'三级 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("'二级 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("'三级 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("'一级 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("'二级 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("'三级 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("'二级 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("'三级 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("适用于需要选择层级时使用。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :props="props" :load="loadNode" lazy="" show-checkbox @check-change="handleCheckChange">\n</el-tree>\n\n\n',script:"\n export default {\n data() {\n return {\n props: {\n label: 'name',\n children: 'zones'\n },\n count: 1\n };\n },\n methods: {\n handleCheckChange(data, checked, indeterminate) {\n console.log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n console.log(data);\n },\n loadNode(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'region1' }, { name: 'region2' }]);\n }\n if (node.level > 3) return resolve([]);\n\n var hasChild;\n if (node.data.name === 'region1') {\n hasChild = true;\n } else if (node.data.name === 'region2') {\n hasChild = false;\n } else {\n hasChild = Math.random() > 0.5;\n }\n\n setTimeout(() => {\n var data;\n if (hasChild) {\n data = [{\n name: 'zone' + this.count++\n }, {\n name: 'zone' + this.count++\n }];\n } else {\n data = [];\n }\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("p",[s._v("本例还展示了动态加载节点数据的方法。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),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("'region1'")]),s._v(" }, { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'region2'")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :props="props1" :load="loadNode1" lazy="" show-checkbox>\n</el-tree>\n\n\n',script:"\n export default {\n data() {\n return {\n props1: {\n label: 'name',\n children: 'zones',\n isLeaf: 'leaf'\n },\n };\n },\n methods: {\n loadNode1(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'region' }]);\n }\n if (node.level > 1) return resolve([]);\n\n setTimeout(() => {\n const data = [{\n name: 'leaf',\n leaf: true\n }, {\n name: 'zone'\n }];\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{props:s.props1,load:s.loadNode1,lazy:"","show-checkbox":""}})],1),a("p",[s._v("由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可将 Tree 的某些节点设置为默认展开或默认选中")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data2" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps">\n</el-tree>\n\n\n',script:"\n export default {\n data() {\n return {\n data2: [{\n id: 1,\n label: '一级 1',\n children: [{\n id: 4,\n label: '二级 1-1',\n children: [{\n id: 9,\n label: '三级 1-1-1'\n }, {\n id: 10,\n label: '三级 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: '一级 2',\n children: [{\n id: 5,\n label: '二级 2-1'\n }, {\n id: 6,\n label: '二级 2-2'\n }]\n }, {\n id: 3,\n label: '一级 3',\n children: [{\n id: 7,\n label: '二级 3-1'\n }, {\n id: 8,\n label: '二级 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("分别通过"),a("code",[s._v("default-expanded-keys")]),s._v("和"),a("code",[s._v("default-checked-keys")]),s._v("设置默认展开和默认选中的节点。需要注意的是，此时必须设置"),a("code",[s._v("node-key")]),s._v("，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),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("'一级 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("'二级 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("'三级 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("'三级 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("'一级 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("'二级 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("'二级 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("'一级 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("'二级 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("'二级 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("可将 Tree 的某些节点设置为禁用状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data3" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]">\n</el-tree>\n\n\n',script:"\n export default {\n data() {\n return {\n data3: [{\n id: 1,\n label: '一级 2',\n children: [{\n id: 3,\n label: '二级 2-1',\n children: [{\n id: 4,\n label: '三级 3-1-1'\n }, {\n id: 5,\n label: '三级 3-1-2',\n disabled: true\n }]\n }, {\n id: 2,\n label: '二级 2-2',\n disabled: true,\n children: [{\n id: 6,\n label: '三级 3-2-1'\n }, {\n id: 7,\n label: '三级 3-2-2',\n disabled: true\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data3,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5]}})],1),a("p",[s._v("通过"),a("code",[s._v("disabled")]),s._v("设置禁用状态。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("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(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),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("'一级 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("3")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'二级 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("'三级 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("'三级 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("'二级 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("'三级 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("'三级 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 }\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data2" show-checkbox="" default-expand-all="" node-key="id" ref="tree" highlight-current :props="defaultProps">\n</el-tree>\n\n<div class="buttons">\n <el-button @click="getCheckedNodes">通过 node 获取</el-button>\n <el-button @click="getCheckedKeys">通过 key 获取</el-button>\n <el-button @click="setCheckedNodes">通过 node 设置</el-button>\n <el-button @click="setCheckedKeys">通过 key 设置</el-button>\n <el-button @click="resetChecked">清空</el-button>\n</div>\n\n\n',script:"\n export default {\n methods: {\n getCheckedNodes() {\n console.log(this.$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n console.log(this.$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n this.$refs.tree.setCheckedNodes([{\n id: 5,\n label: '二级 2-1'\n }, {\n id: 9,\n label: '三级 1-1-1'\n }]);\n },\n setCheckedKeys() {\n this.$refs.tree.setCheckedKeys([3]);\n },\n resetChecked() {\n this.$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n return {\n data2: [{\n id: 1,\n label: '一级 1',\n children: [{\n id: 4,\n label: '二级 1-1',\n children: [{\n id: 9,\n label: '三级 1-1-1'\n }, {\n id: 10,\n label: '三级 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: '一级 2',\n children: [{\n id: 5,\n label: '二级 2-1'\n }, {\n id: 6,\n label: '二级 2-2'\n }]\n }, {\n id: 3,\n label: '一级 3',\n children: [{\n id: 7,\n label: '二级 3-1'\n }, {\n id: 8,\n label: '二级 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:s.getCheckedNodes}},[s._v("通过 node 获取")]),a("el-button",{on:{click:s.getCheckedKeys}},[s._v("通过 key 获取")]),a("el-button",{on:{click:s.setCheckedNodes}},[s._v("通过 node 设置")]),a("el-button",{on:{click:s.setCheckedKeys}},[s._v("通过 key 设置")]),a("el-button",{on:{click:s.resetChecked}},[s._v("清空")])],1)],1),a("p",[s._v("本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置"),a("code",[s._v("node-key")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),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("通过 node 获取"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("通过 key 获取"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("通过 node 设置"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("通过 key 设置"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("清空"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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\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("'二级 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("'三级 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("'一级 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("'二级 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("'三级 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("'三级 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("'一级 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("'二级 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("'二级 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("'一级 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("'二级 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("'二级 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("节点的内容支持自定义，可以在节点区添加按钮或图标等内容")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data4" :props="defaultProps" show-checkbox="" node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent">\n</el-tree>\n\n\n',script:"\n let id = 1000;\n\n export default {\n data() {\n return {\n data4: [{\n id: 1,\n label: '一级 1',\n children: [{\n id: 4,\n label: '二级 1-1',\n children: [{\n id: 9,\n label: '三级 1-1-1'\n }, {\n id: 10,\n label: '三级 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: '一级 2',\n children: [{\n id: 5,\n label: '二级 2-1'\n }, {\n id: 6,\n label: '二级 2-2'\n }]\n }, {\n id: 3,\n label: '一级 3',\n children: [{\n id: 7,\n label: '二级 3-1'\n }, {\n id: 8,\n label: '二级 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n }\n },\n\n methods: {\n append(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 <span style=\"flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;\">\n <span>\n <span>{node.label}</span>\n </span>\n <span>\n <el-button style=\"font-size: 12px;\" type=\"text\" on-click={ () => this.append(data) }>Append</el-button>\n <el-button style=\"font-size: 12px;\" type=\"text\" on-click={ () => this.remove(node, data) }>Delete</el-button>\n </span>\n </span>);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data4,props:s.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("p",[s._v("使用"),a("code",[s._v("render-content")]),s._v("指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")]),a("div",{staticClass:"highlight",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('"data4"')]),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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),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("return")]),s._v(" {\n data4: [{\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'一级 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("'二级 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("'三级 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("'三级 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("'一级 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("'二级 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("'二级 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("'一级 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("'二级 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("'二级 3-2'")]),s._v("\n }]\n }],\n defaultProps: {\n children: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\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 <span style="),a("span",{attrs:{class:"hljs-string"}},[s._v('"flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;"')]),s._v(">\n <span>\n <span>{node.label}</span>\n </span>\n <span>\n <el-button style="),a("span",{attrs:{class:"hljs-string"}},[s._v('"font-size: 12px;"')]),s._v(" type="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" on-click={ () => "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".append(data) }>Append</el-button>\n <el-button style="),a("span",{attrs:{class:"hljs-string"}},[s._v('"font-size: 12px;"')]),s._v(" type="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" on-click={ () => "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".remove(node, data) }>Delete</el-button>\n </span>\n </span>);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("通过关键字过滤树节点")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="输入关键字进行过滤" v-model="filterText">\n</el-input>\n\n<el-tree class="filter-tree" :data="data2" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree2">\n</el-tree>\n\n\n',script:"\n export default {\n watch: {\n filterText(val) {\n this.$refs.tree2.filter(val);\n }\n },\n\n methods: {\n filterNode(value, data) {\n if (!value) return true;\n return data.label.indexOf(value) !== -1;\n }\n },\n\n data() {\n return {\n filterText: '',\n data2: [{\n id: 1,\n label: '一级 1',\n children: [{\n id: 4,\n label: '二级 1-1',\n children: [{\n id: 9,\n label: '三级 1-1-1'\n }, {\n id: 10,\n label: '三级 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: '一级 2',\n children: [{\n id: 5,\n label: '二级 2-1'\n }, {\n id: 6,\n label: '二级 2-2'\n }]\n }, {\n id: 3,\n label: '一级 3',\n children: [{\n id: 7,\n label: '二级 3-1'\n }, {\n id: 8,\n label: '二级 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"输入关键字进行过滤"},model:{value:s.filterText,callback:function(t){s.filterText=t},expression:"filterText"}}),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),a("p",[s._v("在需要对节点进行过滤时，调用 Tree 实例的"),a("code",[s._v("filter")]),s._v("方法，参数为关键字。需要注意的是，此时需要设置"),a("code",[s._v("filter-node-method")]),s._v("，值为过滤函数。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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('"输入关键字进行过滤"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),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("'一级 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("'二级 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("'三级 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("'三级 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("'一级 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("'二级 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("'二级 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("'一级 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("'二级 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("'二级 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("对于同一级的节点，每次只能展开一个")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick">\n</el-tree>\n\n\n',script:"\n export default {\n data() {\n return {\n data: [{\n label: '一级 1',\n children: [{\n label: '二级 1-1',\n children: [{\n label: '三级 1-1-1'\n }]\n }]\n }, {\n label: '一级 2',\n children: [{\n label: '二级 2-1',\n children: [{\n label: '三级 2-1-1'\n }]\n }, {\n label: '二级 2-2',\n children: [{\n label: '三级 2-2-1'\n }]\n }]\n }, {\n label: '一级 3',\n children: [{\n label: '二级 3-1',\n children: [{\n label: '三级 3-1-1'\n }]\n }, {\n label: '二级 3-2',\n children: [{\n label: '三级 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),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("'一级 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("'二级 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("'三级 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("'一级 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("'二级 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("'三级 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("'二级 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("'三级 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("'一级 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("'二级 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("'三级 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("'二级 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("'三级 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree 树形控件")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"lan-jia-zai-zi-ding-yi-xie-zi-jie-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lan-jia-zai-zi-ding-yi-xie-zi-jie-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 懒加载自定义叶子节点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mo-ren-zhan-kai-he-mo-ren-xuan-zhong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhan-kai-he-mo-ren-xuan-zhong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 默认展开和默认选中")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-jie-dian-de-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-jie-dian-de-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 树节点的选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-jie-dian-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-jie-dian-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义节点内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jie-dian-guo-lu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jie-dian-guo-lu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 节点过滤")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-feng-qin-mo-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-mo-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手风琴模式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("展示数据")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("内容为空的时候展示的文本")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("每个树节点用来作为唯一标识的属性，整棵树应该是唯一的")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("配置选项，具体看下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-after-expand")]),a("td",[s._v("是否在第一次展开某个树节点后才渲染其子节点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("加载子树数据的方法")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("树节点的内容区的渲染 Function")]),a("td",[s._v("Function(h, { node, data, store }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("是否高亮当前选中节点，默认值是 false。")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("是否默认展开所有节点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("td",[s._v("是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("展开子节点的时候是否自动展开父节点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("默认展开的节点的 key 的数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("节点是否可被选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("默认勾选的节点的 key 的数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("是否每次只打开一个同级树节点展开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("相邻级节点间的水平缩进，单位为像素")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("指定节点标签为节点对象的某个属性值")]),a("td",[s._v("string, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("指定子树为节点对象的某个属性值")]),a("td",[s._v("string, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("指定节点选择框是否禁用为节点对象的某个属性值")]),a("td",[s._v("boolean, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("isLeaf")]),a("td",[s._v("指定节点是否为叶子节点")]),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:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Tree")]),s._v(" 拥有如下方法，返回目前被选中的节点数组：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("对树节点进行筛选操作")]),a("td",[s._v("接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数")])]),a("tr",[a("td",[s._v("updateKeyChildren")]),a("td",[s._v("通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("若节点可被选择（即 "),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" 为 "),a("code",{pre:!0},[s._v("true")]),s._v("），则返回目前被选中的节点所组成的数组")]),a("td",[s._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),a("code",{pre:!0},[s._v("true")]),s._v(" 则仅返回被选中的叶子节点，默认值为 "),a("code",{pre:!0},[s._v("false")])])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(nodes) 接收勾选节点数据的数组")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("若节点可被选择（即 "),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" 为 "),a("code",{pre:!0},[s._v("true")]),s._v("），则返回目前被选中的节点所组成的数组")]),a("td",[s._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),a("code",{pre:!0},[s._v("true")]),s._v(" 则仅返回被选中的叶子节点的 keys，默认值为 "),a("code",{pre:!0},[s._v("false")])])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 "),a("code",{pre:!0},[s._v("true")]),s._v(" 则仅设置叶子节点的选中状态，默认值为 "),a("code",{pre:!0},[s._v("false")])])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false")])]),a("tr",[a("td",[s._v("getCurrentKey")]),a("td",[s._v("获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("getCurrentNode")]),a("td",[s._v("获取当前被选中节点的 node，若没有节点被选中则返回 null")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("setCurrentKey")]),a("td",[s._v("通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(key) 待被选节点的 key")])]),a("tr",[a("td",[s._v("setCurrentNode")]),a("td",[s._v("通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(node) 待被选节点的 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("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("节点被点击时的回调")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",{pre:!0},[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("节点选中状态发生变化时的回调")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",{pre:!0},[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("当前选中节点变化时触发的事件")]),a("td",[s._v("共两个参数，依次为：当前节点的数据，当前节点的 Node 对象")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("节点被展开时触发的事件")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",{pre:!0},[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("节点被关闭时触发的事件")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",{pre:!0},[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(987)},function(s,t,a){"use strict";function l(s){a(988)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(990),e=a(0),r=l,v=e(null,n.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var l=a(989);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("5315639e",l,!0)},function(s,t,a){t=s.exports=a(109)(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)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography 字体")]),a("p",[s._v("我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。")]),a("h3",{attrs:{id:"zhong-wen-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhong-wen-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 中文字体")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"ying-wen-shu-zi-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ying-wen-shu-zi-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 英文／数字字体")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family-dai-ma"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family-dai-ma","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family 代码")]),a("pre",{pre:!0},[a("code",{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:"zi-ti-shi-yong-gui-fan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ti-shi-yong-gui-fan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 字体使用规范")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("主标题")]),a("td",{staticClass:"h1"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("20px Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("标题")]),a("td",{staticClass:"h2"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("小标题")]),a("td",{staticClass:"h3"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("正文")]),a("td",{staticClass:"text-regular"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("正文（小）")]),a("td",{staticClass:"text-small"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("辅助文字")]),a("td",{staticClass:"text-smaller"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}],e={render:l,staticRenderFns:n};t.a=e},function(s,t,a){s.exports=a(992)},function(s,t,a){"use strict";function l(s){a(993)}Object.defineProperty(t,"__esModule",{value:!0});var n=a(995),e=a.n(n),r=a(996),v=a(0),_=l,c=v(e.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var l=a(994);"string"==typeof l&&(l=[[s.i,l,""]]),l.locals&&(s.exports=l.locals);a(589)("36c5f9ca",l,!0)},function(s,t,a){t=s.exports=a(109)(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("上传头像图片只能是 JPG 格式!"),a||this.$message.error("上传头像图片大小不能超过 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)},handleExceed:function(s,t){this.$message.warning("当前限制选择 3 个文件，本次选择了 "+s.length+" 个文件，共选择了 "+(s.length+t.length)+" 个文件")},beforeRemove:function(s,t){return this.$confirm("确定移除 "+s.name+"？")}}}},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("通过点击或者拖拽上传文件")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">\n <el-button size="small" type="primary">点击上传</el-button>\n <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n },\n handleExceed(files, fileList) {\n this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);\n },\n beforeRemove(file, fileList) {\n return this.$confirm(`确定移除 ${ file.name }？`);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"before-remove":s.beforeRemove,multiple:"",limit:3,"on-exceed":s.handleExceed,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("p",[s._v("通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置"),a("code",[s._v("limit")]),s._v("和"),a("code",[s._v("on-exceed")]),s._v("来限制上传文件的个数和定义超出限制时的行为。可通过设置"),a("code",[s._v("before-remove")]),s._v("来阻止文件移除操作。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("点击上传"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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文件，且不超过500kb"),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-upload")]),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("`当前限制选择 3 个文件，本次选择了 "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${files.length}")]),s._v(" 个文件，共选择了 "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${files.length + fileList.length}")]),s._v(" 个文件`")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">\n <img v-if="imageUrl" :src="imageUrl" class="avatar">\n <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n imageUrl: ''\n };\n },\n methods: {\n handleAvatarSuccess(res, file) {\n this.imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n const isJPG = file.type === 'image/jpeg';\n const isLt2M = file.size / 1024 / 1024 < 2;\n\n if (!isJPG) {\n this.$message.error('上传头像图片只能是 JPG 格式!');\n }\n if (!isLt2M) {\n this.$message.error('上传头像图片大小不能超过 2MB!');\n }\n return isJPG && isLt2M;\n }\n }\n }\n",style:"\n .avatar-uploader .el-upload {\n border: 1px dashed #d9d9d9;\n border-radius: 6px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n .avatar-uploader .el-upload:hover {\n border-color: #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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),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("'上传头像图片只能是 JPG 格式!'")]),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("'上传头像图片大小不能超过 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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">\n <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible" size="tiny">\n <img width="100%" :src="dialogImageUrl" alt>\n</el-dialog>\n\n',script:"\n export default {\n data() {\n return {\n dialogImageUrl: '',\n dialogVisible: false\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePictureCardPreview(file) {\n this.dialogImageUrl = file.url;\n this.dialogVisible = true;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",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,size:"tiny"},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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),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(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tiny"')]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList2" list-type="picture">\n <el-button size="small" type="primary">点击上传</el-button>\n <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data() {\n return {\n fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("点击上传"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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文件，且不超过500kb"),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-upload")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :file-list="fileList3">\n <el-button size="small" type="primary">点击上传</el-button>\n <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data() {\n return {\n fileList3: [{\n name: 'food.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }, {\n name: 'food2.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }]\n };\n },\n methods: {\n handleChange(file, fileList) {\n this.fileList3 = fileList.slice(-3);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("点击上传"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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文件，且不超过500kb"),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-upload")]),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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>\n <i class="el-icon-upload"></i>\n <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>\n <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/",multiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("将文件拖到此处，或"),a("em",[s._v("点击上传")])]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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("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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),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("将文件拖到此处，或"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("em")]),s._v(">")]),s._v("点击上传"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("em")]),s._v(">")]),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("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文件，且不超过500kb"),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-upload")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">\n <el-button slot="trigger" size="small" type="primary">选取文件</el-button>\n <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>\n <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n submitUpload() {\n this.$refs.upload.submit();\n },\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,"auto-upload":!1}},[a("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[s._v("选取文件")]),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("上传到服务器")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{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(":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(":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("选取文件"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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("上传到服务器"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),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文件，且不超过500kb"),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-upload")]),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 submitUpload() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.upload.submit();\n },\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("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},n=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload 上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dian-ji-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 点击上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yong-hu-tou-xiang-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yong-hu-tou-xiang-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 用户头像上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",{pre:!0},[s._v("before-upload")]),s._v(" 限制用户上传的图片格式和大小。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhao-pian-qiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhao-pian-qiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 照片墙")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",{pre:!0},[s._v("list-type")]),s._v(" 属性来设置文件列表的样式。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-pian-lie-biao-suo-lue-tu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-lie-biao-suo-lue-tu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图片列表缩略图")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shang-chuan-wen-jian-lie-biao-kong-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shang-chuan-wen-jian-lie-biao-kong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 上传文件列表控制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过 "),a("code",{pre:!0},[s._v("on-change")]),s._v(" 钩子函数来对列表进行控制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tuo-zhuai-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tuo-zhuai-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 拖拽上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-dong-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-dong-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手动上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("action")]),a("td",[s._v("必选参数，上传的地址")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("headers")]),a("td",[s._v("设置上传的请求头部")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("是否支持多选文件")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("data")]),a("td",[s._v("上传时附带的额外参数")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("上传的文件字段名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("file")])]),a("tr",[a("td",[s._v("with-credentials")]),a("td",[s._v("支持发送 cookie 凭证信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-file-list")]),a("td",[s._v("是否显示已上传文件列表")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("drag")]),a("td",[s._v("是否启用拖拽上传")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("accept")]),a("td",[s._v("接受上传的"),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("文件类型")]),s._v("（thumbnail-mode 模式下此参数无效）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-preview")]),a("td",[s._v("点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-remove")]),a("td",[s._v("文件列表移除文件时的钩子")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-success")]),a("td",[s._v("文件上传成功时的钩子")]),a("td",[s._v("function(response, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-error")]),a("td",[s._v("文件上传失败时的钩子")]),a("td",[s._v("function(err, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-progress")]),a("td",[s._v("文件上传时的钩子")]),a("td",[s._v("function(event, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-change")]),a("td",[s._v("文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-upload")]),a("td",[s._v("上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-remove")]),a("td",[s._v("删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("list-type")]),a("td",[s._v("文件列表的类型")]),a("td",[s._v("string")]),a("td",[s._v("text/picture/picture-card")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("auto-upload")]),a("td",[s._v("是否在选取文件后立即进行上传")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("file-list")]),a("td",[s._v("上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[]")])]),a("tr",[a("td",[s._v("http-request")]),a("td",[s._v("覆盖默认的上传行为，可以自定义上传的实现")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("limit")]),a("td",[s._v("最大允许上传个数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-exceed")]),a("td",[s._v("文件超出个数限制时的钩子")]),a("td",[s._v("function(files, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("clearFiles")]),a("td",[s._v("清空已上传的文件列表（该方法不支持在 before-upload 中调用）")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("abort")]),a("td",[s._v("取消上传请求")]),a("td",[s._v("（ file: fileList 中的 file 对象 ）")])])])])}],e={render:l,staticRenderFns:n};t.a=e}]));
Reference in New Issue View Git Blame Copy Permalink